Radio Group

A set of checkable buttons — known as radio buttons — where no more than one of the buttons can be checked at a time.

Layout

default

comfortable

compact

Props

Value Disabled Loop Select when focused Orientation

Features

🎹 Keyboard navigation
🧠 Smart focus management
🔄 Horizontal and vertical orientation
~~🌐 RTL support~~ (incoming!)

<script lang="ts">
    import { RadioGroup } from "melt/builders";

    const group = new RadioGroup();
    const items = ['a', 'b', 'c'];
</script>

<div {...group.root}>
  <!-- svelte-ignore a11y_label_has_associated_control -- https://github.com/sveltejs/svelte/issues/15067 -->
  <label {...group.label}>Label</label>
  {#each items as i}
    {@const item = group.getItem(i)}
    <div {...item.attrs}>
      {#if item.checked}
        ✅
      {/if}
    </div>
  {/each}
  <input {...group.hiddenInput} />
</div>

<script lang="ts">
  import { RadioGroup } from "melt/components";
  const items = ['a', 'b', 'c'];
</script>

<RadioGroup>
  {#snippet children(group)}
    <div {...group.root}>
      <!-- svelte-ignore a11y_label_has_associated_control -- https://github.com/sveltejs/svelte/issues/15067 -->
      <label {...group.label}>Label</label>
      {#each items as i}
        {@const item = group.getItem(i)}
        <div {...item.attrs}>
          {#if item.checked}
            ✅
          {/if}
        </div>
      {/each}
      <input {...group.hiddenInput} />
    </div>
  {/snippet}
</RadioGroup>

API Reference

Constructor Props

The props that are passed when calling

new RadioGroup()

export type RadioGroupProps = {
  /**
   * If `true`, prevents the user from interacting with the group.
   *
   * @default false
   */
  disabled?: MaybeGetter<boolean | undefined>;
  /**
   * If `true`, indicates that the user must select a radio button before
   * the owning form can be submitted.
   *
   * @default false
   */
  required?: MaybeGetter<boolean | undefined>;
  /**
   * If the the button selection should loop when navigating with the arrow keys.
   *
   * @default true
   */
  loop?: MaybeGetter<boolean | undefined>;
  /**
   * If `true`, the value will be changed whenever a button is focused.
   *
   * @default true
   */
  selectWhenFocused?: MaybeGetter<boolean | undefined>;
  /**
   * The orientation of the slider.
   *
   * @default "vertical"
   */
  orientation?: MaybeGetter<"horizontal" | "vertical" | undefined>;
  /**
   * Input name for radio group.
   */
  name?: MaybeGetter<string | undefined>;
  /**
   * Default value for radio group.
   *
   * @default ""
   */
  value?: MaybeGetter<string | undefined>;
  /**
   * Called when the radio button is clicked.
   */
  onValueChange?: (active: string) => void;
};

export type RadioGroupProps = {
  /**
   * If `true`, prevents the user from interacting with the group.
   *
   * @default false
   */
  disabled?: MaybeGetter<boolean | undefined>;
  /**
   * If `true`, indicates that the user must select a radio button before
   * the owning form can be submitted.
   *
   * @default false
   */
  required?: MaybeGetter<boolean | undefined>;
  /**
   * If the the button selection should loop when navigating with the arrow keys.
   *
   * @default true
   */
  loop?: MaybeGetter<boolean | undefined>;
  /**
   * If `true`, the value will be changed whenever a button is focused.
   *
   * @default true
   */
  selectWhenFocused?: MaybeGetter<boolean | undefined>;
  /**
   * The orientation of the slider.
   *
   * @default "vertical"
   */
  orientation?: MaybeGetter<"horizontal" | "vertical" | undefined>;
  /**
   * Input name for radio group.
   */
  name?: MaybeGetter<string | undefined>;
  /**
   * Default value for radio group.
   *
   * @default ""
   */
  value?: MaybeGetter<string | undefined>;
  /**
   * Called when the radio button is clicked.
   */
  onValueChange?: (active: string) => void;
};

Methods

The methods returned from

new RadioGroup()

getItem

(item: string) => RadioItem

select

(item: string) => void

Properties

The properties returned from

new RadioGroup()

disabled
```
boolean
```
```
boolean
```
required
```
boolean
```
```
boolean
```
loop
```
boolean
```
```
boolean
```
selectWhenFocused
```
boolean
```
```
boolean
```

orientation

"horizontal" | "vertical"

value
```
string
```
```
string
```

root

{
  readonly "data-melt-radio-group-root": ""
  readonly id: string
  readonly role: "radiogroup"
  readonly "aria-required": boolean
  readonly "aria-labelledby": string
  readonly "data-orientation": "horizontal" | "vertical"
  readonly "data-disabled": true | undefined
  readonly "data-value": string
}

{
  readonly "data-melt-radio-group-root": ""
  readonly id: string
  readonly role: "radiogroup"
  readonly "aria-required": boolean
  readonly "aria-labelledby": string
  readonly "data-orientation": "horizontal" | "vertical"
  readonly "data-disabled": true | undefined
  readonly "data-value": string
}

label

{
  readonly "data-melt-radio-group-label": ""
  readonly id: string
  readonly for: string
  readonly onclick: (
    e: MouseEvent & { currentTarget: EventTarget & HTMLLabelElement },
  ) => void
  readonly "data-orientation": "horizontal" | "vertical"
  readonly "data-disabled": true | undefined
  readonly "data-value": string
}

{
  readonly "data-melt-radio-group-label": ""
  readonly id: string
  readonly for: string
  readonly onclick: (
    e: MouseEvent & { currentTarget: EventTarget & HTMLLabelElement },
  ) => void
  readonly "data-orientation": "horizontal" | "vertical"
  readonly "data-disabled": true | undefined
  readonly "data-value": string
}

hiddenInput

{
  readonly "data-melt-radio-group-hidden-input": ""
  readonly disabled: boolean
  readonly required: boolean
  readonly hidden: true
  readonly "aria-hidden": true
  readonly tabindex: -1
  readonly value: string
  readonly name: string | undefined
}

{
  readonly "data-melt-radio-group-hidden-input": ""
  readonly disabled: boolean
  readonly required: boolean
  readonly hidden: true
  readonly "aria-hidden": true
  readonly tabindex: -1
  readonly value: string
  readonly name: string | undefined
}