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.

View as Markdown

<sv-host-form>· loading

Tryenter 10.0.20.21 as the address.

Installation

pnpm dlx shadcn@latest add @lumesec/sv-host-form

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/sv-host-form.json

Usage

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

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

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.

changeReact proponChangeDetail{ 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.

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.

<sv-host-card>

Host cardsv-host-card

<sv-host-list>

Host listsv-host-list

<sv-vm-stack>

Hypervisorssv-vm-stack

<sv-containers>

Containerssv-containers

Was this page helpful?

Related