Switch

A component for toggling between two states, such as on/off or enabled/disabled.

Anatomy

Usage

<script>
  import {Switch} from 'ui-ingredients';
</script>

<Switch.Root>
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label>Label</Switch.Label>
  <Switch.HiddenInput />
</Switch.Root>

Usage with Field component

<script>
  import {Switch, Field} from 'ui-ingredients';
</script>

<Field.Root>
  <Switch.Root>
    <Switch.Control>
      <Switch.Thumb />
    </Switch.Control>
    <Switch.Label>Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.Root>

  <Field.HelperText>This is a helper text</Field.HelperText>
  <Field.ErrorText>This is an error text</Field.ErrorText>
</Field.Root>

API Reference

Root

Prop	Default	Description
`checked`		`boolean` The controlled checked state of the switch
`defaultChecked`		`boolean` The initial checked state of the switch when rendered. Use when you don't need to control the checked state of the switch.
`disabled`		`boolean` Whether the switch is disabled.
`form`		`string` The id of the form that the switch belongs to
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; hiddenInput?: string; control?: string; label?: string; thumb?: string; }` The ids of the elements in the switch. Useful for composition.
`invalid`		`boolean` If `true`, the switch is marked as invalid.
`label`		`string` Specifies the localized strings that identifies the accessibility elements and their states
`name`		`string` The name of the input field in a switch (Useful for form submission).
`onCheckedChange`		`(details: CheckedChangeDetails) => void` Function to call when the switch is clicked.
`readOnly`		`boolean` Whether the switch is read-only
`required`		`boolean` If `true`, the switch input is marked as required,
`value`	`"on"`	`string \| number` The value of switch input. Useful for form submission.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-active`	Present when active or pressed
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-focus-visible`	Present when focused with keyboard
`data-hover`	Present when hovered
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only
`data-state`	"checked" \| "unchecked"

Control

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-active`	Present when active or pressed
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-focus-visible`	Present when focused with keyboard
`data-hover`	Present when hovered
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only
`data-state`	"checked" \| "unchecked"

HiddenInput

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-active`	Present when active or pressed
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-focus-visible`	Present when focused with keyboard
`data-hover`	Present when hovered
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only
`data-state`	"checked" \| "unchecked"

Thumb

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-active`	Present when active or pressed
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-focus-visible`	Present when focused with keyboard
`data-hover`	Present when hovered
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only
`data-state`	"checked" \| "unchecked"

Accessibility

Keyboard Support

Key	Description
Space + Enter	Toggle the switch