Radio

component

The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.

Install

php bin/console ux:install radio \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: templates/ → templates/
Composer: twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (3)

Default

Light

Dark

Code

<div class="flex flex-col gap-3">
    <div class="flex items-center mb-4">
        <twig:Radio id="default" value="" name="radio-default"/>
        <twig:Label for="default" class="select-none ms-2 font-medium">Default radio</twig:Label>
    </div>

    <div class="flex items-center mb-4">
        <twig:Radio id="checked" value="" name="radio-default" checked/>
        <twig:Label for="checked" class="select-none ms-2 font-medium">Checked state</twig:Label>
    </div>
</div>

Disabled

Light

Dark

Code

<div class="flex flex-col gap-3">
    <div class="flex items-center mb-4">
        <twig:Radio id="default" value="" name="radio-disabled" disabled/>
        <twig:Label for="default" class="select-none ms-2 font-medium text-fg-disabled">Default radio</twig:Label>
    </div>

    <div class="flex items-center mb-4">
        <twig:Radio id="checked" value="" name="radio-disabled" checked disabled/>
        <twig:Label for="checked" class="select-none ms-2 font-medium text-fg-disabled">Checked state</twig:Label>
    </div>
</div>

Bordered

Light

Dark

Code

<div class="grid gap-6 md:grid-cols-2">

    <div class="flex items-center mb-4">
        <twig:Label for="default" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
            <div class="p-4">
                <twig:ux:icon name="flowbite:server-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
                <p class="select-none w-full text-sm font-medium text-heading">16GB unified memory</p>
                <p class="select-none text-sm text-body">Seamlessly handle multitasking, large apps.</p>
            </div>
            <twig:Radio id="default" value="default" class="mt-4 me-4" name="radio-bordered"/>
        </twig:Label>
    </div>

    <div class="flex items-center mb-4">
        <twig:Label for="checked" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
            <div class="p-4">
                <twig:ux:icon name="flowbite:database-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
                <p class="select-none w-full text-sm font-medium text-heading">1TB SSD storage</p>
                <p class="select-none text-sm text-body">Get ultra-fast storage with 1TB of SSD space</p>
            </div>
            <twig:Radio id="checked" value="checked" class="mt-4 me-4" name="radio-bordered" checked/>
        </twig:Label>
    </div>
</div>