Leaf UI
  • English

      • Radio

      Choose one option from a group.

      Examples

      RadioGroup builds options and supplies a group name. Provide label, aria-label or aria-labelledby. Give the group a name for form submission. Read event.target.value in onChange. Individual Radio controls with the same name form a native group.

      Live previewGrouped options
      Choose appearance
      basic.tsx
      import { RadioGroup } from '@sudden3/leaf-ui';

export function RadioBasic() {
  return (
    <RadioGroup
      label="Choose appearance"
      name="appearance"
      defaultValue="light"
      options={[
        { label: 'Light', value: 'light' },
        { label: 'Dark', value: 'dark' },
        { label: 'System', value: 'system' },
        { label: 'Custom (unavailable)', value: 'custom', disabled: true },
      ]}
    />
  );
}
      Live previewControlled and vertical layout
      Notification frequency
      Selected:daily
      controlled.tsx
      import { RadioGroup } from '@sudden3/leaf-ui';
import { useState } from 'react';

export function RadioControlled() {
  const [value, setValue] = useState('daily');
  return (
    <div className="leaf-demo-stack">
      <RadioGroup
        label="Notification frequency"
        direction="vertical"
        value={value}
        onChange={(event) => setValue(event.target.value)}
        options={[
          { label: 'Daily', value: 'daily' },
          { label: 'Weekly', value: 'weekly' },
          { label: 'Important messages only', value: 'important' },
        ]}
      />
      <span className="leaf-demo-note">Selected:{value}</span>
    </div>
  );
}

      RadioGroup API

      PropertyTypeDefaultDescription
      optionsreadonly RadioOption[]RequiredOptions
      value / defaultValuestring—Controlled value / initial uncontrolled value
      onChangeChangeEventHandler<HTMLInputElement>—Read event.target.value
      namestringGeneratedShared field name; specify it for form submission
      labelstring—Group name
      direction'horizontal' | 'vertical''horizontal'Layout direction
      size'sm' | 'md' | 'lg''md'Control size
      disabled / requiredbooleanfalseDisable the group / require a selection
      refRef<HTMLFieldSetElement>—DOM reference

      Radio API

      PropertyTypeDefaultDescription
      checked / defaultCheckedboolean—Controlled checked state / initial checked state
      valuestring | number | readonly string[]—The submitted value for this option
      namestring—Radio controls with the same name form a group
      onChangeChangeEventHandler<HTMLInputElement>—Read event.target.value
      disabled / requiredbooleanfalseDisable the option / require a selection
      size'sm' | 'md' | 'lg''md'Control size
      childrenReactNode—Clickable label
      refRef<HTMLInputElement>—DOM reference

      RadioOption

      PropertyTypeDefaultDescription
      labelstringRequiredOption label
      valuestringRequiredValue; unique within the group
      disabledbooleanfalseDisable the option

      Types

      Import RadioProps to describe component props. Option types in the API table link to their detailed fields above.

      import type { RadioProps, RadioGroupProps, RadioOption } from '@sudden3/leaf-ui';

      Forms and localization

      Use name to include values in FormData. Uncontrolled fields follow form reset; reset controlled values in application state. Place controls in FormField for labels, help and errors. ConfigProvider supplies regional themes and translated built-in UI. Application labels and options are your responsibility.