v0.1.0

<hf-switch>Custom elementControlsForm controlFree

Switch

Form-associated switch whose track fills with a dithered energy field when on; the thumb springs across with a few sparks.

View as Markdown

<hf-switch>· loading

UltracodePlan multi-agent workflows

Web searchLook things up while answering

Playground

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

Loading <hf-switch>

Props

checkedlive

valueremounts

nameremounts

<HfSwitch checked value="on" name="ultra" />

Installation

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

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-switch.json

Usage

import { HfSwitch } from "@/components/lumesec/hf-switch";

export function Example() {
  return (
    <>
      <HfSwitch name="ultra" checked>
        Ultracode
        <span slot="hint">Plan multi-agent workflows</span>
      </HfSwitch>
      <HfSwitch name="search" style={{ marginTop: 16 }}>
        Web search
        <span slot="hint">Look things up while answering</span>
      </HfSwitch>
    </>
  );
}

Behaviour

The track charges up with a dithered energy field when it turns on and the thumb springs across with a few sparks. Form-associated, like every control here.

API reference

Attributes

checkedReact propcheckedTypebooleanDefaultfalse

Presence attribute. Observed: adding or removing it updates the switch, aria-checked and the form value.

valueReact propvalueTypestringDefaulton

Value submitted with the form while checked.

nameReact propnameTypestring

Form field name.

Events

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

changeReact proponChangeDetail{ checked: boolean }

Fires when the user toggles the switch. Not fired when checked is set from code.

Properties

checkedTypeboolean

Reflects the checked attribute.

Slots

(default)

Label text. Falls back to Ultracode.

hint

Secondary text under the label.

Accessibility

The control is a native <button> with role="switch" and aria-checked, so Enter and Space toggle it.
aria-label is the text in the default slot (Ultracode when the slot is empty) and follows changes to that content. The hint slot is linked with aria-describedby.
Clicking anywhere on the row, including the label text, toggles the switch.
Submits name=value (default on) while checked and nothing while unchecked. No validation; form reset does not change the state.
Reduced motion: the thumb moves without the spring, the fill appears without its sweep or flowing pattern, and no sparks are drawn.

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.

<hf-button>

Buttonhf-button

<hf-segmented>

Segmented controlhf-segmented

<hf-input>

Text fieldhf-input

<hf-composer>

Prompt composerhf-composer

Was this page helpful?

Related