XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Switch

Previous: SortableNext: Table

A toggle for turning a setting on or off.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import { Switch } from "xiod-ui/switch";

API Reference

Detailed documentation of properties and options.

Switch

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
checked
boolean
–

Whether the switch is currently active.

To render an uncontrolled switch, use the defaultChecked prop instead.

defaultChecked
SortableTable
boolean
false

Whether the switch is initially active.

To render a controlled switch, use the checked prop instead.

disabled
boolean
false

Whether the component should ignore user interaction.

form
string
–

Identifies the form that owns the hidden input. Useful when the switch is rendered outside the form.

id
string
–

The id of the hidden input element.

When nativeButton is true, the id is applied to the root element.

inputRef
Ref<HTMLInputElement>
–

A ref to access the hidden <input> element.

name
string
–

Identifies the field when a form is submitted.

nativeButton
boolean
false

Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.

onCheckedChange
((checked: boolean, eventDetails: SwitchRoot.ChangeEventDetails) => void)
–

Event handler called when the switch is activated or deactivated.

readOnly
boolean
false

Whether the user should be unable to activate or deactivate the switch.

required
boolean
false

Whether the user must activate the switch before submitting a form.

size
"lg"|"md"|"sm"|"2xl"|"xl"
md

The size of the component.

uncheckedValue
string
–

The value submitted with the form when the switch is off. By default, unchecked switches do not submit any value, matching native checkbox behavior.

value
string
–

The value submitted with the form when the switch is on. By default, switch submits the "on" value, matching native checkbox behavior.

variant
"default"|"expressive"|"sharp"|"classic"
default

The visual style of the component.