# Svelte Radio - Flowbite 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. ## Setup ```svelte ``` ## Radio examples Use the default example of a radio component with the checked and unchecked state. ```svelte Default radio Checked 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. ```svelte Disabled radio Disabled checked ``` ## 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. ```svelte Left column Right column Default radio Disabled radio

Label on the other side ``` ## Radio with a link Use this example if you want to add an anchor link inside the label of the radio component. ```svelte I agree with the terms and conditions . ``` ## Helper text Get started with this example if you want to add a secondary helper text for the radio component. ```svelte Free shipping via Flowbite 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. ```svelte

Default radio

Checked state

``` ## Radio list group Use this example to show a list of radio items grouped inside a card. ```svelte

Technology {technology}

Svelte
Vue JS
React
Angular

``` ## Horizontal list group Use this example to show a list of radio items inside a card horizontally. ```svelte

Identification

Svelte
Vue JS
React
Angular

``` ## Radio in dropdown Here’s an example of a list group that you can use right away. ```svelte Enable notifications Some helpful instruction goes over here. Enable 2FA auth Some helpful instruction goes over here. Subscribe newsletter Some helpful instruction goes over here. ``` ## Inline layout You can align the radio elements horizontally by using a wrapper tag and applying the flex class. ```svelte

Inline 1 Inline 2 checked Inline 3 Inline disabled

``` You can use the property `inline` as the alternative. ```svelte Inline 1 Inline 2 Inline checked Inline disabled ``` ## Colors ```svelte

Select color

Red Green Purple Teal Yellow Orange

``` ## 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. ```svelte

Choose technology:

0-50 MB

Good for small websites

500-1000 MB

Good for large websites

``` ## RadioButton The special case component - `RadioButton` - is the `Radio` with the [Button](/docs/components/buttons) look and feel. It 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. ```svelte

List style: {radioGroup}

``` ## RadioButton style Use `color` and `checkedClass` props to style the checked state: ```svelte Option 1 Option 2 ``` ## Component data ### Radio #### Types [RadioProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L913) #### Props - children - "aria-describedby": ariaDescribedby - inline: false - labelClass - color: "primary" - custom: false - group: $bindable() - value: $bindable() - class: className - inputClass - classes ## References - [Flowbite Radio](https://flowbite.com/docs/forms/radio/)