v0.1.0

<hf-segmented>Custom elementControlsForm controlFree

Segmented control

Segmented radio group whose selected slab stretches toward the new option on a spring. Form-associated; arrow keys move it.

View as Markdown

<hf-segmented>· loading

Tryuse the arrow keys.

Playground

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

Loading <hf-segmented>

Props

optionsremounts

valueremounts

labelremounts

nameremounts

<HfSegmented
  options="Chat,Code,Ultracode"
  value="Code"
  label="Mode"
  name="mode"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-segmented

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

Usage

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

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

Behaviour

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

API reference

Attributes

optionsReact propoptionsTypestringDefaultChat,Code,Ultracode

Comma-separated option labels. Read once on first connect to build the buttons.

valueReact propvalueTypestring

Initially selected option; must match a label exactly. Falls back to the first option. Read once on first connect.

labelReact proplabelTypestringDefaultMode

Accessible name of the radio group.

nameReact propnameTypestring

Form field name.

Events

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

changeReact proponChangeDetail{ value: string }

Fires when the user selects a different option. value is the option label.

Properties

value (read-only)Typestring

Label of the selected option. There is no setter.

options (read-only)Typestring[]

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.

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.

<hf-button>

Buttonhf-button

<hf-switch>

Switchhf-switch

<hf-input>

Text fieldhf-input

<hf-composer>

Prompt composerhf-composer

Was this page helpful?

Related