Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. 

<RadioGroup defaultValue="comfortable">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="default" id="r1" />
    <Label htmlFor="r1">Default</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="comfortable" id="r2" />
    <Label htmlFor="r2">Comfortable</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="compact" id="r3" />
    <Label htmlFor="r3">Compact</Label>
  </div>
</RadioGroup>

Installation

uvx --from basic-components components add radio_group
pipx run --spec basic-components components add radio_group
pip install basic-components && components add radio_group
  • Copy Radio Group components below to your local environment
  • Place them in the components/ui/radio_group directory in your project
  • Configure your jinja environment for JinjaX
  • Add the cn() helper function to your global jinja environment

Usage

<Alert>
    <TerminalIcon className="h-4 w-4" />
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
        You can add components to your app using the cli.
    </AlertDescription>
</Alert>

Code

{#def
    defaultValue: str = "",
    className: str = "",
#}
<div
    x-data="{
        selectedValue: '{{ defaultValue }}'
    }"
    role="radiogroup"
    class="{{ className }} grid gap-2"
>
  {{ content }}
</div>
{#def
    name: str = "",
    value: str = "",
    className: str = "",
#}
<input
    type="radio"
    :checked="selectedValue === '{{ value }}'"
    @change="selectedValue = '{{ value }}'"
    name="{{ name }}"
    value="{{ value }}"
    class="border-zinc-200 text-black accent-black focus:ring-black dark:border-zinc-700 dark:bg-zinc-950 dark:focus:ring-zinc-300"

    {{ attrs.render() }}
/>