Skip to content
PHIL
Français

Toggle

component

A button that stays pressed, on a checkbox: the browser presses it and submits it with the form, without JavaScript.

Preview

Light

Code 
<twig:Toggle name="bold" variant="outline"><b aria-hidden="true">B</b><span class="isVisuallyHidden">Bold</span></twig:Toggle>

Dark

Code 
<twig:Toggle name="bold" variant="outline"><b aria-hidden="true">B</b><span class="isVisuallyHidden">Bold</span></twig:Toggle>

Try it

Change the props; the example is rendered again by the server.

<twig:Toggle name="bold" variant="outline"><b aria-hidden="true">B</b><span class="isVisuallyHidden">Bold</span></twig:Toggle>

Variants

variant

The visual style variant.

variant="default"
variant="outline"

size

The toggle size.

size="default"
size="sm"
size="lg"

pressed

Whether the toggle is pressed on initial render.

pressed="false"
pressed="true"

disabled

Whether the toggle is disabled.

disabled="false"
disabled="true"

Installation

php bin/console ux:install toggle --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

PropTypeDefaultDescription
variant 'default'|'outline' 'default' The visual style variant.
size 'default'|'sm'|'lg' 'default' The toggle size.
pressed bool false Whether the toggle is pressed on initial render.
disabled bool false Whether the toggle is disabled.
name string|null null The name of the form field, submitted while the toggle is pressed.
value string 'on' The value submitted while the toggle is pressed.

Accessibility

The control is a checkbox inside its label, hidden but kept in the page: the keyboard reaches it, the space bar presses it, and screen readers say whether it is checked. The focus ring goes around the whole toggle. An icon alone needs a visually hidden name.

Files to copy

templates/components/Toggle.html.twig 
{#-
 # A button that stays pressed, on a checkbox: the browser presses it, says so and submits it with the form, without
 # JavaScript. The label wraps the box, so a click anywhere on the toggle presses it.
 #}
{%- props
    ## 'default'|'outline' The visual style variant.
    variant = 'default',
    ## 'default'|'sm'|'lg' The toggle size.
    size = 'default',
    ## bool Whether the toggle is pressed on initial render.
    pressed = false,
    ## bool Whether the toggle is disabled.
    disabled = false,
    ## string|null The name of the form field, submitted while the toggle is pressed.
    name = null,
    ## string The value submitted while the toggle is pressed.
    value = 'on'
-%}
{%- set _size = {sm: ' isSmall', lg: ' isLarge'}[size] ?? '' -%}
<label data-slot="toggle" data-variant="{{ variant }}" data-size="{{ size }}"{{ attributes.defaults({class: 'isToggle' ~ (variant is same as('outline') ? ' isOutline' : '') ~ _size}) }}>
<input type="checkbox" class="isToggleInput" value="{{ value }}"{% if name is not null %} name="{{ name }}"{% endif %}{% if pressed %} checked{% endif %}{% if disabled %} disabled{% endif %}>
{##- The label or the icon of the toggle; an icon alone needs a visually hidden text. -#}
{%- block content %}{% endblock -%}
</label>