Slider
Toggle switch form field for binary choices.
---
import Slider from "@forms/slider/Slider.astro";
---
<Slider label="Enable notifications" name="notifications" />---
blocks:
_component: building-blocks/forms/slider
label: Enable notifications
name: notifications
checked: false
---Overview
A toggle switch for binary choices. Provides a visual on/off control that's more intuitive than a checkbox for settings and preferences.
Properties
label string | default: My slider
The label text for the slider field.
name string | default: my_slider
The name attribute for the slider field.
checked boolean | default: false
Whether the slider is checked by default.
required boolean | default: false
Whether the field is required.
value string | default: on
The value submitted when the slider is checked.
Examples
States
---
import Slider from "@forms/slider/Slider.astro";
---
<Slider label="Enable dark mode" name="dark_mode" />---
blocks:
_component: building-blocks/forms/slider
label: Enable dark mode
name: dark_mode
checked: false
------
import Slider from "@forms/slider/Slider.astro";
---
<Slider checked label="Enable email notifications" name="email_notifications" />---
blocks:
_component: building-blocks/forms/slider
label: Enable email notifications
name: email_notifications
checked: true
---Required
---
import Slider from "@forms/slider/Slider.astro";
---
<Slider label="I agree to the terms and conditions" name="terms_agreement" required />---
blocks:
_component: building-blocks/forms/slider
label: I agree to the terms and conditions
name: terms_agreement
checked: false
required: true
---Without label
---
import Slider from "@forms/slider/Slider.astro";
---
<Slider name="toggle_feature" />---
blocks:
_component: building-blocks/forms/slider
name: toggle_feature
checked: false
---