# Register a host
> Form that registers a host after checking the name is unique and the IPv4 address sits in the chosen network and is not in use.
- Element: `<sv-host-form>`
- React: `import { SvHostForm } from "@/components/lumesec/sv-host-form"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-host-form.json
- Page: https://elements.lumesec.ai/components/service-map/host-form



Live preview: https://elements.lumesec.ai/view/sv-host-form

```html
<sv-host-form></sv-host-form>
```

## Installation

```bash
npx shadcn@latest add @lumesec/sv-host-form
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/sv-host-form.json
```

## Usage

React:

```tsx
import { SvHostForm } from "@/components/lumesec/sv-host-form";

export function Example() {
  return (
    <SvHostForm />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/sv-host-form.js"></script>

<sv-host-form></sv-host-form>
```

## Behaviour

Adds a host to the inventory. The name must be unique, and the address must sit inside the chosen network and not be in use already.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail                                                                                      | Description                                                                                                         |
| -------- | ---------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ action: 'add-host', host: string, ip: string, kind: 'physical' \| 'vm' \| 'container' }` | Fires when a host passes validation. The element does not store the host elsewhere; handle the event to persist it. |

## Accessibility

* Kind is a `role="radiogroup"` of `role="radio"` buttons with `aria-checked`. Arrow-key movement is not implemented; each option is its own Tab stop.
* Every input has a visible label.
* On a validation error the field gets `aria-invalid="true"` and focus, and the message is in an assertive live region.
* The success message has `role="status"`.
* Reduced motion: the pixel burst on success is skipped and CSS transitions are switched off.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--lumesec-success` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-muted` and `--ui-ok`.

## Notes

* Validation: the name has 2 to 30 lowercase letters, digits or dashes, starts with a letter or digit and is not taken; the IPv4 address lies in the selected /24 network, does not end in .0, .1 or .255, and is not used by another host.
* Names and addresses are checked against the demo inventory `INFRA` plus hosts registered earlier in the same element.
* Networks: Edge 10.0.10.0/24, Servers 10.0.20.0/24 (default), Data 10.0.30.0/24, Monitoring 10.0.40.0/24. Kind defaults to VM; the Runs on field (hv-01 or hv-02) is hidden for physical hosts.
* vCPU and memory are neither validated nor included in the event.
* Not form-associated: the element wraps its own `<form>` and does not submit with a surrounding form.
* Container query: single column under 420 px.