Toggle
Form Input
Switch a value betwenn two states
- Customizable
- Prefix & Suffix
- Form Ready
Quickstart #
<script>
import { Toggle } from '@steeze-ui/components'
</script>
<Toggle checked />API Reference #
| Property | Type | Default |
|---|---|---|
checked
|
Boolean
|
false
|
disabled
|
Boolean
|
false
|
name
|
String
|
null
|
value
|
String
|
"on"
|
Styling #
| Name | Default | Notes |
|---|---|---|
--st-toggle-size
|
20px
|
Diameter of the Thumb
|
--st-toggle-offset
|
4px
|
Offset between Root and Thumb
|
--st-toggle-bg-color
|
--st-colors-dark2
|
BG of Root when unchecked
|
--st-toggle-checked-bg-color
|
--st-colors-primary5
|
BG of Root when checked
|
--st-toggle-thumb-bg-color
|
--st-colors-dark8
|
BG of Thumb when unchecked
|
--st-toggle-thumb-checked-bg-color
|
--st-colors-light3
|
BG of Thumb when checked
|
Examples #
Listen for changes
Use the dispatched listener change to run custom code when the value changes
<Toggle
on:change={(e) => {
console.log(e.detail.checked)
}}
/>Usable with HTML forms
Your backend will receive the associated formData
<form action="/api/toggle" method="post">
<Toggle
name="my-toggle"
value="active"
/>
</form>