NativeSelect

component

The select element of the browser, dressed by phil-ux: the list of the system, on every device, without JavaScript.

Preview

Light

Code

<twig:NativeSelect name="country" aria-label="Country">
    <twig:NativeSelect:Option value="">Choose a country</twig:NativeSelect:Option>
    <twig:NativeSelect:OptGroup label="North America">
        <twig:NativeSelect:Option value="ca">Canada</twig:NativeSelect:Option>
        <twig:NativeSelect:Option value="mx">Mexico</twig:NativeSelect:Option>
    </twig:NativeSelect:OptGroup>
</twig:NativeSelect>

Dark

Code

<twig:NativeSelect name="country" aria-label="Country">
    <twig:NativeSelect:Option value="">Choose a country</twig:NativeSelect:Option>
    <twig:NativeSelect:OptGroup label="North America">
        <twig:NativeSelect:Option value="ca">Canada</twig:NativeSelect:Option>
        <twig:NativeSelect:Option value="mx">Mexico</twig:NativeSelect:Option>
    </twig:NativeSelect:OptGroup>
</twig:NativeSelect>

Try it

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

<twig:NativeSelect name="country" aria-label="Country">
    <twig:NativeSelect:Option value="">Choose a country</twig:NativeSelect:Option>
    <twig:NativeSelect:OptGroup label="North America">
        <twig:NativeSelect:Option value="ca">Canada</twig:NativeSelect:Option>
        <twig:NativeSelect:Option value="mx">Mexico</twig:NativeSelect:Option>
    </twig:NativeSelect:OptGroup>
</twig:NativeSelect>

Variants

`size`

The select size.

size="default"

size="sm"

Installation

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

Props

Prop	Type	Default	Description
`size`	`'default'\|'sm'`	`'default'`	The select size.

Accessibility

The browser gives the list its role, its keyboard and its announcements; name it with a Label or aria-label.

Files to copy

templates/components/NativeSelect.html.twig

{%- props
    ## 'default'|'sm' The select size.
    size = 'default'
-%}
<select data-slot="native-select" data-size="{{ size }}"{{ attributes.defaults(size is same as('sm') ? {class: 'isSmall'} : {}) }}>
{##- The options, each a `NativeSelect:Option`, grouped or not by `NativeSelect:OptGroup`. -#}
{%- block content %}{% endblock -%}
</select>

templates/components/NativeSelect/OptGroup.html.twig

{%- props
    ## string The name of the group, read before its options.
    label
-%}
<optgroup label="{{ label }}" data-slot="native-select-optgroup"{{ attributes }}>
{##- The options of the group, each a `NativeSelect:Option`. -#}
{%- block content %}{% endblock -%}
</optgroup>

templates/components/NativeSelect/Option.html.twig

<option data-slot="native-select-option"{{ attributes }}>
{##- The text of the option. -#}
{%- block content %}{% endblock -%}
</option>