Toggle
Toggle switch form field for binary choices.
---
import Toggle from "@forms/toggle/Toggle.astro";
---
<Toggle label="Enable notifications" name="notifications" />---
blocks:
_component: building-blocks/forms/toggle
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 toggle
The label text for the toggle field.
name string | default: my_toggle
The name attribute for the toggle field.
checked boolean | default: false
Whether the toggle is checked by default.
required boolean | default: false
Whether the field is required.
value string | default: on
The value submitted when the toggle is checked.
Examples #
States #
---
import Toggle from "@forms/toggle/Toggle.astro";
---
<Toggle label="Enable dark mode" name="dark_mode" />---
blocks:
_component: building-blocks/forms/toggle
label: Enable dark mode
name: dark_mode
checked: false
------
import Toggle from "@forms/toggle/Toggle.astro";
---
<Toggle checked label="Enable email notifications" name="email_notifications" />---
blocks:
_component: building-blocks/forms/toggle
label: Enable email notifications
name: email_notifications
checked: true
---Required #
---
import Toggle from "@forms/toggle/Toggle.astro";
---
<Toggle label="I agree to the terms and conditions" name="terms_agreement" required />---
blocks:
_component: building-blocks/forms/toggle
label: I agree to the terms and conditions
name: terms_agreement
checked: false
required: true
---Without label #
---
import Toggle from "@forms/toggle/Toggle.astro";
---
<Toggle name="toggle_feature" />---
blocks:
_component: building-blocks/forms/toggle
name: toggle_feature
checked: false
---