Toggle

composant

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

Aperçu

Clair

Bold

Code

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

Sombre

Bold

Code

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

Essayer

Changez les propriétés ; le serveur rend l’exemple de nouveau.

Bold

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

Variantes

`variant`

The visual style variant.

Bold

variant="default"

Bold

variant="outline"

`size`

The toggle size.

Bold

size="default"

Bold

size="sm"

Bold

size="lg"

`pressed`

Whether the toggle is pressed on initial render.

Bold

pressed="false"

Bold

pressed="true"

`disabled`

Whether the toggle is disabled.

Bold

disabled="false"

Bold

disabled="true"

Installation

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

Propriétés

Propriété	Type	Par défaut	Description
`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.

Fichiers à copier

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>