Switch
Toggle between two states in user interfaces.
<.switch field={f[:active]} />Label
Add clear labels to switches for improved usability and context.
<.switch name="remember_password" label="Remember my password" />Sizes
Offer multiple switch sizes to suit different layouts and preferences.
<.switch name="small" size="sm" />
<.switch name="default" />
<.switch name="large" size="lg" />Disabled
Show switches in a disabled state for unavailable functionality.
<.switch name="disabled" disabled />Colors
Customize switch colors to match your design system and convey meaning.
<.switch name="red" checked color="red" />
<.switch name="orange" checked color="orange" />
<.switch name="amber" checked color="amber" />
<.switch name="yellow" checked color="yellow" />
<.switch name="lime" checked color="lime" />
<.switch name="green" checked color="green" />
<.switch name="emerald" checked color="emerald" />
<.switch name="teal" checked color="teal" />
<.switch name="cyan" checked color="cyan" />
<.switch name="sky" checked color="sky" />
<.switch name="blue" checked color="blue" />
<.switch name="indigo" checked color="indigo" />
<.switch name="violet" checked color="violet" />
<.switch name="purple" checked color="purple" />
<.switch name="fuchsia" checked color="fuchsia" />
<.switch name="pink" checked color="pink" />
<.switch name="rose" checked color="rose" />
<.switch name="gray" checked color="gray" />