OptionButton

OptionButton is the Windows 98 radio control. Wrap related options in OptionGroup so they share a name and controlled value.

Props

Export	Key props	Description
`OptionGroup`	`name`, `value`, `defaultValue`, `onValueChange`	Provides the controlled or uncontrolled selected value for the group.
`OptionButton`	`value`, `disabled`, `children`	Individual radio option selected through its group value.

Examples

Controlled option group

CompactComfortableDisabled

import { OptionButton, OptionGroup } from '@murasaki/react98'
import { useState } from 'react'
 
export function OptionButtonBasicDemo(): React.ReactElement {
  const [choice, setChoice] = useState('compact')
 
  return (
    <OptionGroup name="density" value={choice} onValueChange={setChoice}>
      <div className="flex flex-col gap-2">
        <OptionButton value="compact">Compact</OptionButton>
        <OptionButton value="comfortable">Comfortable</OptionButton>
        <OptionButton value="disabled" disabled>Disabled</OptionButton>
      </div>
    </OptionGroup>
  )
}

ARIA

OptionButton renders a native radio input and associated label.

Keyboard

Space selects the focused radio option. Arrow keys follow native browser radio-group behavior for options that share the same name.

SSR

Controlled groups should provide the same value during server render and hydration.