Radio Button

A styled radio input that takes its size, animation speed and label classes from the Form or Fieldset around it.

About

It is a native <input type="radio"> underneath, so the browser handles the one-per-group behavior. What the component adds is the styling, the linked label, and the settings it picks up from its parent.

Example

Here is a basic example of using the Radio Button component:

Svelte 
<script>
  import { Radio } from "theui-svelte";
</script>

<Radio name="gender">Male</Radio>
<Radio name="gender">Female</Radio>

Name and Value

The name and value props are what group the radio buttons. The name ensures that only one radio button from the group can be selected at a time, while the value represents the option this radio button stands for. To read which option is selected, use the group prop.

Svelte 
<Radio name="myRadio" value="credit-card">Credit Card</Radio>
<Radio name="myRadio" value="paypal">Paypal</Radio>

Selected Option

The group prop holds the value of the selected radio button. Give every radio button of the group the same name and bind the same variable with bind:group. The radio button whose value matches the bound variable is selected, so you can also preselect an option by setting that variable.

Svelte 
<script>
  let plan = $state("free");
</script>

<Radio name="plan" value="free" bind:group={plan}>Free plan</Radio>
<Radio name="plan" value="pro" bind:group={plan}>Pro plan</Radio>

<p>Selected plan: {plan}</p>

Radio Button Sizes

The size prop controls the size of the radio button, allowing flexibility for different UI layouts. Available sizes include "sm", "md" (default), "lg" and "xl".

Svelte 
<Radio name="myRadio" size="sm">Small (sm) radio button</Radio>
<Radio name="myRadio" size="md">Medium (md) radio button</Radio>
<Radio name="myRadio" size="lg">Large (lg) radio button</Radio>
<Radio name="myRadio" size="xl">Extra Large (xl) radio button</Radio>

Animation

The animationSpeed prop defines the speed of the radio button's selection transition. This improves user interaction by adding smooth effects when selecting options. The available values are "none", "slower", "slow" "normal" (default), "fast" and "faster".

Setting it to "none"disables animations, while other values changes the transition speed.

Svelte 
<Radio name="myRadio" animationSpeed="slower">Slower animation</Radio>
<Radio name="myRadio" animationSpeed="slow">Slow animation</Radio>
<Radio name="myRadio" animationSpeed="normal">Normal animation</Radio>
<Radio name="myRadio" animationSpeed="fast">Fast animation</Radio>
<Radio name="myRadio" animationSpeed="faster">Faster animation</Radio>
<Radio name="myRadio" animationSpeed="none">No animation</Radio>

Resetting Style

The reset prop removes all default styles from the Radio Button component, leaving only the applied custom styles. This is useful for complete control over styling.

Svelte 
<Radio name="myRadio" reset={true} class="checked:bg-green-500 focus:ring-green-200 focus:border-green-200">Option 1</Radio>
<Radio name="myRadio" reset={true} class="checked:bg-green-500 focus:ring-green-200 focus:border-green-200">Option 2</Radio>

Disabled Radio Button

Add the native disabled or readonly attribute to prevent changes. The radio button and its label are dimmed and can't be clicked.

Svelte 
<Radio name="myRadio" value="1" disabled>Disabled radio button</Radio>

Label Position

The labelPosition prop controls where the label sits. It accepts "end" (default), which places the label after the radio button, and "start", which places it before. The position follows the writing direction, so in a right-to-left layout "start" puts the label on the right.

Svelte 
<Radio name="myRadio" value="after">Label after the radio button</Radio>
<Radio name="myRadio" value="before" labelPosition="start">Label before the radio button</Radio>

Customization

The Radio Button component offers multiple ways to customize its appearance:

  • labelClasses - Custom styles for the label. If used within a Fieldset or Form component, it inherits their labelClasses. The size, animationSpeed and reset props are inherited the same way.
  • wrapperClasses - Additional classes for the wrapper <div>, useful for layout adjustments.
  • class - Apply custom styles to the radio button itself.
Svelte 
<Radio name="myRadio"
  wrapperClasses="flex relative gap-4 text-nowrap"
  labelClasses="text-red-500 font-bold z-[1]"
  class="w-8 h-6"
>
  Option 1
</Radio>

<Radio name="myRadio"
  wrapperClasses="flex relative gap-4 text-nowrap"
  labelClasses="text-red-500 font-bold z-[1]"
  class="w-8 h-6"
>
  Option 2
</Radio>

Accessibility

The Radio component uses the native <input type="radio">, so screen readers announce whether it is selected. When you bind group, the aria-checked attribute reflects the selection as well. It also supports aria-disabled through props for disabled states. Each radio button is associated with a <Label> for better accessibility. The radio buttons are grouped together, so only one can be selected at a time, and the label can be placed before the radio button with labelPosition="start" for right-aligned designs.

Configuration