# VLANs and DHCP
> Networks with VLAN ID, subnet, DHCP range and lease usage; each row opens an inline editor that validates IDs, subnets and ranges.
- Element: `<ln-vlans>`
- React: `import { LnVlans } from "@/components/lumesec/ln-vlans"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-vlans.json
- Page: https://elements.lumesec.ai/components/network/vlans



Live preview: https://elements.lumesec.ai/view/ln-vlans

```html
<ln-vlans></ln-vlans>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-vlans
```

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/ln-vlans.json
```

## Usage

React:

```tsx
import { LnVlans } from "@/components/lumesec/ln-vlans";

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

HTML:

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

<ln-vlans></ln-vlans>
```

## Behaviour

Networks with VLAN ID, subnet, DHCP range and lease usage. Edit a row in place; IDs, subnets and ranges are checked before saving.

## API reference

### Events

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

| Event    | React prop | Detail                                                                                                                                                                                      | Description                                                                                                                                                                                             |
| -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ action: "create" \| "update", network: { n: string, v: number, net: string, dhcp: boolean, lo: number, hi: number, used: number, iso: boolean } } \| { action: "delete", vlan: number }` | Fires when a network is created, saved or deleted. In `network`, `n` is the name, `v` the VLAN ID, `net` the subnet, `lo` and `hi` the DHCP range, `used` the active leases and `iso` client isolation. |

## Keyboard

| Keys   | Action                                                                  |
| ------ | ----------------------------------------------------------------------- |
| Enter  | In an editor field: save the network.                                   |
| Escape | While a row is open: cancel editing and discard an unsaved new network. |

## Accessibility

* Rows are buttons with `aria-expanded`. The editor is a `role="group"` labelled "Edit …" with the network name.
* Fields have visible labels. DHCP server and Isolate clients are `role="switch"` buttons with `aria-checked`.
* On a validation error the field gets `aria-invalid="true"` and focus, and the message is written to an `aria-live="assertive"` region.
* Saves and deletions are announced in a polite live region. After save or cancel, focus returns to the row.
* Reduced motion: the row and chevron transitions are removed; there is no other animation.

## 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 `--background`, `--border`, `--card`, `--destructive`, `--foreground`, `--input`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-border`, `--ui-border-strong`, `--ui-border-subtle`, `--ui-danger`, `--ui-fg`, `--ui-fg2`, `--ui-mono`, `--ui-muted`, `--ui-surface` and `--ui-track`.

## Notes

* Starts with six built-in demo networks. No attribute loads other data; lease counts are simulated and change every 2.2 s while the element is on screen. Changes are not persisted.
* Validation: a name of 1 to 24 characters; a unique VLAN ID from 1 to 4094; a subnet in CIDR form with a prefix from /16 to /30; with DHCP on, a range that starts at 2 or higher, ends above its start and fits the subnet.
* Create network adds one draft at a time with the next free VLAN ID from 70 upward in steps of 10. VLAN 1 (Management) cannot be deleted.
* Uses a container query: below 500px the lease and isolation columns hide.