formsradio-group

RadioGroup

Single-select radio group with card, list, and table layout variants.

Import#

import { RadioGroup } from 'moraine'

Slot Structure#

Radiogroup root with mutually exclusive radio items. Use FormField for the group label, description, help text, and validation message.

root
└── item (×n)
    ├── input
    ├── control
    │   └── indicator
    └── wrapper (optional)
        ├── label (optional)
        └── description (optional)

Examples#

Variants#

List, card, and table variants for single selection.

1
function Variants() {
2
  const ITEMS = [
3
    { value: 'starter', label: 'Starter', description: 'For personal projects' },
4
    { value: 'pro', label: 'Pro', description: 'For teams and scaling' },
5
    { value: 'enterprise', label: 'Enterprise', description: 'For regulated workloads' },
6
  ]
7

8
  return (
9
    <div class="gap-4 grid lg:grid-cols-3 sm:grid-cols-2">
10
      <div class="p-4 b-(1 border) rounded-lg">
11
        <FormField label="List">
12
          <RadioGroup items={ITEMS} defaultValue="starter" />
13
        </FormField>
14
      </div>
15
      <div class="p-4 b-(1 border) rounded-lg">
16
        <FormField label="Card">
17
          <RadioGroup items={ITEMS} variant="card" defaultValue="pro" />
18
        </FormField>
19
      </div>
20
      <div class="p-4 b-(1 border) rounded-lg">
21
        <FormField label="Table">
22
          <RadioGroup
23
            items={ITEMS}
24
            variant="table"
25
            orientation="vertical"
26
            defaultValue="enterprise"
27
          />
28
        </FormField>
29
      </div>
30
    </div>
31
  )
32
}

Sizes + Orientation#

Size scale and vertical/horizontal modes.

1
function SizesOrientation() {
2
  const ITEMS = [
3
    { value: 'starter', label: 'Starter', description: 'For personal projects' },
4
    { value: 'pro', label: 'Pro', description: 'For teams and scaling' },
5
    { value: 'enterprise', label: 'Enterprise', description: 'For regulated workloads' },
6
  ]
7

8
  const SIZES: RadioGroupSizeName[] = ['xs', 'sm', 'md', 'lg', 'xl']
9

10
  type RadioGroupSizeName = Exclude<RadioGroupT.Variant['size'], undefined>
11

12
  return (
13
    <div class="gap-4 grid lg:grid-cols-2">
14
      <div class="space-y-3">
15
        <For each={SIZES}>
16
          {(size) => (
17
            <div class="p-4 b-(1 border) rounded-lg">
18
              <FormField label={`Size ${size}`}>
19
                <RadioGroup items={ITEMS} size={size} defaultValue="starter" />
20
              </FormField>
21
            </div>
22
          )}
23
        </For>
24
      </div>
25
      <div class="space-y-3">
26
        <div class="p-4 b-(1 border) rounded-lg">
27
          <FormField label="Horizontal card">
28
            <RadioGroup items={ITEMS} variant="card" orientation="horizontal" defaultValue="pro" />
29
          </FormField>
30
        </div>
31
        <div class="p-4 b-(1 border) rounded-lg">
32
          <FormField label="Horizontal table">
33
            <RadioGroup
34
              items={ITEMS}
35
              variant="table"
36
              orientation="horizontal"
37
              defaultValue="enterprise"
38
            />
39
          </FormField>
40
        </div>
41
      </div>
42
    </div>
43
  )
44
}

Controlled + Disabled#

Controlled value with disabled option in data set.

1
function ControlledDisabled() {
2
  const ITEMS = [
3
    { value: 'starter', label: 'Starter', description: 'For personal projects' },
4
    { value: 'pro', label: 'Pro', description: 'For teams and scaling' },
5
    { value: 'enterprise', label: 'Enterprise', description: 'For regulated workloads' },
6
  ]
7

8
  const [value, setValue] = createSignal('pro')
9

10
  return (
11
    <div class="max-w-xl space-y-3">
12
      <FormField label="Plan selector">
13
        <RadioGroup
14
          items={[
15
            ...ITEMS,
16
            {
17
              value: 'legacy',
18
              label: 'Legacy',
19
              description: 'No longer available',
20
              disabled: true,
21
            },
22
          ]}
23
          value={value()}
24
          onChange={setValue}
25
          variant="table"
26
          orientation="horizontal"
27
        />
28
      </FormField>
29
      <p class="text-xs text-muted-foreground">Current plan: {value()}</p>
30
    </div>
31
  )
32
}

Indicator Positions#

Start/end/hidden indicator styles with card variant.

1
function IndicatorPositions() {
2
  const ITEMS = [
3
    { value: 'starter', label: 'Starter', description: 'For personal projects' },
4
    { value: 'pro', label: 'Pro', description: 'For teams and scaling' },
5
    { value: 'enterprise', label: 'Enterprise', description: 'For regulated workloads' },
6
  ]
7

8
  const INDICATORS: RadioGroupIndicatorName[] = ['start', 'end', 'hidden']
9

10
  type RadioGroupIndicatorName = Exclude<RadioGroupT.Variant['indicator'], undefined>
11

12
  return (
13
    <div class="gap-4 grid lg:grid-cols-3 sm:grid-cols-2">
14
      <For each={INDICATORS}>
15
        {(indicator) => (
16
          <div class="p-4 b-(1 border) rounded-lg">
17
            <FormField label={`Indicator ${indicator}`}>
18
              <RadioGroup items={ITEMS} variant="card" indicator={indicator} defaultValue="pro" />
19
            </FormField>
20
          </div>
21
        )}
22
      </For>
23
    </div>
24
  )
25
}

API Reference#

Attributes#

Slotroot5 attributes

Radio group container that owns selection state and layout.

ARIA Attributes

ARIA Attribute	Description
aria-disabled	Indicates that the control is disabled.
aria-orientation	Communicates horizontal or vertical orientation.
aria-readonly	Indicates that the control value cannot be changed by the user.
aria-required	Indicates that user input is required.
role	Defines the semantic role exposed to assistive technology.

Props#

Prop	Type	Default	Description
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`RadioGroupT.Classes \| undefined`	—	—
defaultValue	`string \| undefined`	—	The default value of the input (uncontrolled).
disabled	`boolean \| undefined`	`false`	Whether the input is disabled.
id	`string \| undefined`	—	The ID of the input element.
indicator	`RadioGroupItemIndicator \| undefined`	—	—
items	`(string \| RadioGroupT.Item)[] \| undefined`	—	Array of items to render in the group.
name	`string \| undefined`	—	The name of the input element, used for form submission.
onChange	`((value: string) => void) \| undefined`	—	Callback when the selected value changes.
orientation	`"horizontal" \| "vertical" \| undefined`	`vertical`	The orientation of the radio group.
readOnly	`boolean \| undefined`	`false`	Whether the input is read-only.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
required	`boolean \| undefined`	`false`	Whether the input is required.
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`RadioGroupT.Styles \| undefined`	—	—
value	`string \| undefined`	—	The current value of the input (controlled).
variant	`RadioGroupItemVariant \| undefined`	—	—

Items#

A radio item object.

Prop	Type	Default	Description
description	`JSX.Element`	—	Description for the radio item.
disabled	`boolean \| undefined`	—	Whether the item is disabled.
label	`JSX.Element`	—	Label for the radio item.
value	`string \| undefined`	—	Value of the radio item.