Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Radio

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.

Radio examples

Use the default example of a radio component with the checked and unchecked state.

Disabled state

Apply the `disabled` attribute to the radio component to disallow the selection for the user. This example can be used for the disabled state of the radio component by applying the disabled attribute to the input element.

Alternative syntax

If you need separate control over the label and the radio you can use the verbose syntax, but then you need to take care about aligning manually.
Left column Right column

Radio with a link

Use this example if you want to add an anchor link inside the label of the radio component.

Helper text

Get started with this example if you want to add a secondary helper text for the radio component.

For orders shipped from $25 in books or $29 in other categories

Bordered

Use this example of a radio inside a card element to enable a larger area of clicking activation.

Radio list group

Use this example to show a list of radio items grouped inside a card.

Technology svelte

Horizontal list group

Use this example to show a list of radio items inside a card horizontally.

Identification

Radio in dropdown

Here’s an example of a list group that you can use right away.

Inline layout

You can align the radio elements horizontally by using a wrapper tag and applying the flex class.
You can use the property `inline` as the alternative.

Colors

Select color

Advanced layout

Use this example of an advanced layout of radio elements where the label parent element can be styled when the radio is checked.

Choose technology:

RadioButton

The special case component - `RadioButton` - is the `Radio` with the [Button](/docs/components/buttons) look and feel. I can be used as standalone element or be wrapped inside [ButtonGroup](/docs/components/button-group). This component accepts all props from the [Button](/docs/components/buttons) for styling and `Radio` for behaviour.

List style: notes