Toggle
A two-state button that can be either on or off.
Usage
Default
Outline
Sizes
Pressed
Disabled
In a form
Components
| Component | Built using | Source |
|---|---|---|
Toggle | Phlex | |
ToggleController | Stimulus JS |
A two-state button that can be either on or off.
Toggle { "Bold" }
Toggle(variant: :outline) { "Italic" }
div(class: "flex items-center gap-2") do Toggle(size: :sm) { "Small" } Toggle(size: :default) { "Default" } Toggle(size: :lg) { "Large" } end
Toggle(pressed: true) { "Pressed" }
Toggle(disabled: true) { "Disabled" }
Toggle(name: "bold", value: "1") { "Bold" }
| Component | Built using | Source |
|---|---|---|
Toggle | Phlex | |
ToggleController | Stimulus JS |