Radio Button

Provides a modern and customizable alternative to the default radio input, supporting various sizes, animations, and styling options.

About

This Radio Button component enhances standard radio inputs with additional styling and customization features. It ensures proper form handling by allowing only one selection per group while providing a smooth user experience. The component supports different sizes, animations, and customization options, making it adaptable to various UI needs.

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 essential for grouping radio buttons. The name ensures that only one radio button from the group can be selected at a time, while the value represents the selected option.

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

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 animateSpeed 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" animateSpeed="slower">Slower animation</Radio>
<Radio name="myRadio" animateSpeed="slow">Slow animation</Radio>
<Radio name="myRadio" animateSpeed="normal">Normal animation</Radio>
<Radio name="myRadio" animateSpeed="fast">Fast animation</Radio>
<Radio name="myRadio" animateSpeed="faster">Faster animation</Radio>
<Radio name="myRadio" animateSpeed="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="border border-green-500 bg-green-200">Option 1</Radio>
<Radio name="myRadio" reset={true} class="border border-green-500 bg-green-200">Option 2</Radio>

Customization

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

  • labelClasses – Custom styles for the label. If used within a Form component, it inherits the Form's labelClasses.
  • 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"> with the aria-checked attribute to reflect its selected state. 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, ensuring that only one can be selected at a time, and the layout can be reversed when needed for RTL or right-aligned designs.

Configuration