Skip to content
PHIL
Français

Switch

component

An on and off control: a checkbox with the role switch, which the browser checks and submits without JavaScript.

Preview

Light

Code 
<twig:Label><twig:Switch name="news" :checked="true" /> Newsletter</twig:Label>

Dark

Code 
<twig:Label><twig:Switch name="news" :checked="true" /> Newsletter</twig:Label>

Try it

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

<twig:Label><twig:Switch name="news" :checked="true" /> Newsletter</twig:Label>

Variants

size

The switch size.

size="default"
size="sm"

checked

Whether the switch is initially checked.

checked="false"
checked="true"

Installation

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

Props

PropTypeDefaultDescription
size 'default'|'sm' 'default' The switch size.
checked bool false Whether the switch is initially checked.

Accessibility

A form control like another: name it with a Label. phil-ux keeps its target wide enough for a finger.

Files to copy

templates/components/Switch.html.twig 
{%- props
    ## 'default'|'sm' The switch size.
    size = 'default',
    ## bool Whether the switch is initially checked.
    checked = false
-%}
<input type="checkbox" role="switch" data-slot="switch" data-size="{{ size }}"{% if checked %} checked{% endif %}{{ attributes.defaults({class: 'isSwitch' ~ (size is same as('sm') ? ' isSmall' : '')}) }}>