The RadioButton component allows users to select a single option from a group of choices.

• Single selection: Only one option in a group can be selected at a time.
• Accessible labels: Supports descriptive labels for each option.
• Customizable appearance: Supports sizes and status colors.
• Form integration: Works with forms and controlled state.
• Consistent styling: Matches theme and UI standards.

Usage Example

Preview

xs

sm

md

lg

xl

success

warning

error

info

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { RadioButton } from "@fefade-ui/svelte"
</script>

{#each Constants.sizes as size, i (size)}
  <RadioButton label={size} checked={Boolean(i % 2)} {size} />
{/each}

{#each Constants.statusColors as color (color)}
  <RadioButton label={color} name="test" {color} />
{/each}

Props

Prop	Type	Default	Description
label	string	—	Text label displayed alongside the radio button.
name	string	—	Group name for mutually exclusive selection.
checked	boolean	false	Whether the radio button is selected.
size	string	—	Visual size variant (e.g., small, medium, large).
color	string	—	Color indicating status or theme.
disabled	boolean	false	Disables user interaction.
class	string	—	Optional CSS classes for custom styling.
style	string	—	Inline style overrides.

Best Practices

• Group related radio buttons with the same name for exclusive selection.
• Provide clear and concise labels for accessibility.
• Avoid using radio buttons for multiple selections; use checkboxes instead.
• Use consistent size and color across related options.
• Ensure keyboard accessibility and focus states are visible.