Radio

Radio button component with label, error states, and group support.

uiforminteractive

Installation

Copy the component file into your project's src/lib/components/ directory.

templates/Radio.svelte

Usage

<script>
  import Radio from '$lib/components/Radio.svelte';

  let plan = $state('pro');
  let theme = $state('');
  let size = $state('medium');
</script>

<!-- Basic radio group -->
<div class="flex flex-col gap-3">
  <Radio
    bind:value={plan}
    radioValue="free"
    name="plan"
    label="Free Plan"
  />
  <Radio
    bind:value={plan}
    radioValue="pro"
    name="plan"
    label="Pro Plan"
  />
  <Radio
    bind:value={plan}
    radioValue="enterprise"
    name="plan"
    label="Enterprise Plan"
  />
</div>
<p class="text-neutral-400 mt-2">Selected: {plan}</p>

<!-- Radio group with helper text -->
<div class="flex flex-col gap-3">
  <Radio
    bind:value={theme}
    radioValue="light"
    name="theme"
    label="Light Theme"
    helperText="A bright and clean interface"
  />
  <Radio
    bind:value={theme}
    radioValue="dark"
    name="theme"
    label="Dark Theme"
    helperText="Easy on the eyes in low light"
  />
  <Radio
    bind:value={theme}
    radioValue="auto"
    name="theme"
    label="Auto"
    helperText="Matches your system preferences"
  />
</div>

<!-- Radio group with disabled option -->
<div class="flex flex-col gap-3">
  <Radio
    bind:value={size}
    radioValue="small"
    name="size"
    label="Small"
  />
  <Radio
    bind:value={size}
    radioValue="medium"
    name="size"
    label="Medium"
  />
  <Radio
    bind:value={size}
    radioValue="large"
    name="size"
    label="Large"
    disabled
  />
</div>

<!-- Radio group with error and required -->
<div class="flex flex-col gap-3">
  <Radio
    bind:value={theme}
    radioValue="light"
    name="theme-required"
    label="Light"
    required
  />
  <Radio
    bind:value={theme}
    radioValue="dark"
    name="theme-required"
    label="Dark"
    required
    error={theme === '' ? 'Please select a theme' : ''}
  />
</div>

<!-- Horizontal radio group -->
<div class="flex gap-6">
  <Radio
    bind:value={size}
    radioValue="small"
    name="size-horizontal"
    label="S"
  />
  <Radio
    bind:value={size}
    radioValue="medium"
    name="size-horizontal"
    label="M"
  />
  <Radio
    bind:value={size}
    radioValue="large"
    name="size-horizontal"
    label="L"
  />
</div>

Props

Prop	Type	Default	Description
value	string \| number	''	Currently selected value in the radio group (bindable)
radioValue	string \| number	''	This radio button's value
label	string	''	Label text displayed next to the radio button
disabled	boolean	false	Whether the radio button is disabled
required	boolean	false	Whether the radio group is required (adds asterisk to label)
error	string	''	Error message to display below radio button
helperText	string	''	Helper text displayed below radio button when no error
id	string	''	Radio button id attribute (auto-generated if not provided)
name	string	''	Radio button name attribute (should be same for all radios in a group)
class	string	''	Additional CSS classes for the radio wrapper

Files

Radio.svelte