# Segmented control
> Segmented radio group whose selected slab stretches toward the new option on a spring. Form-associated; arrow keys move it.
- Element: `<hf-segmented>`
- React: `import { HfSegmented } from "@/components/lumesec/hf-segmented"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-segmented.json
- Page: https://elements.lumesec.ai/components/pixel-hd/segmented



Live preview: https://elements.lumesec.ai/view/hf-segmented

```html
<hf-segmented name="mode" options="Chat,Code,Ultracode" value="Code"></hf-segmented>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/hf-segmented
```

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/hf-segmented.json
```

## Usage

React:

```tsx
import { HfSegmented } from "@/components/lumesec/hf-segmented";

export function Example() {
  return (
    <HfSegmented name="mode" options="Chat,Code,Ultracode" value="Code" />
  );
}
```

HTML:

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

<hf-segmented name="mode" options="Chat,Code,Ultracode" value="Code"></hf-segmented>
```

## Behaviour

The selected slab is liquid: it stretches toward the new option on a spring and settles with a glint.

## API reference

### Attributes

| Attribute | React prop | Type     | Default               | Description                                                                                                        |
| --------- | ---------- | -------- | --------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `options` | `options`  | `string` | `Chat,Code,Ultracode` | Comma-separated option labels. Read once on first connect to build the buttons.                                    |
| `value`   | `value`    | `string` | —                     | Initially selected option; must match a label exactly. Falls back to the first option. Read once on first connect. |
| `label`   | `label`    | `string` | `Mode`                | Accessible name of the radio group.                                                                                |
| `name`    | `name`     | `string` | —                     | Form field name.                                                                                                   |

### Events

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

| Event    | React prop | Detail              | Description                                                                  |
| -------- | ---------- | ------------------- | ---------------------------------------------------------------------------- |
| `change` | `onChange` | `{ value: string }` | Fires when the user selects a different option. `value` is the option label. |

### Properties

| Property              | Type       | Description                                        |
| --------------------- | ---------- | -------------------------------------------------- |
| `value` (read-only)   | `string`   | Label of the selected option. There is no setter.  |
| `options` (read-only) | `string[]` | Option labels parsed from the `options` attribute. |

## Keyboard

| Keys                   | Action                                                              |
| ---------------------- | ------------------------------------------------------------------- |
| ArrowLeft / ArrowRight | Select and focus the previous or next option, wrapping at the ends. |

## Accessibility

* The container has `role="radiogroup"` with `aria-label` from `label`.
* Each option is a native button with `role="radio"` and `aria-checked`.
* Roving tabindex: only the selected option is in the tab order.
* Submits the selected option label under `name`. No validation; form reset does not change the selection.
* Reduced motion: the slab jumps to the selected option without the spring or wobble, and its texture is drawn once instead of flowing.

## 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 `--foreground`, `--lumesec`, `--muted` and `--muted-foreground`.

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

## Notes

* Attributes are not observed. Changing `options` or `value` after the element connects has no effect.
* When the selected label contains `ultra` (case-insensitive) the slab uses a faster, brighter pattern.
* The element sizes to its options by default; when it is given a larger width, the options share it equally.