GroupBox
GroupBox renders a Windows 98 fieldset with an optional legend label.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | - | Legend text shown on the top border. |
className | string | - | Adds width, spacing, or layout classes. |
children | ReactNode | - | Grouped controls. |
Examples
Grouped radio options
import { GroupBox, OptionButton, OptionGroup } from '@murasaki/react98'
import { useState } from 'react'
export function GroupBoxBasicDemo(): React.ReactElement {
const [mode, setMode] = useState('window')
return (
<GroupBox label="Open mode" className="w-64">
<OptionGroup name="open-mode" value={mode} onValueChange={setMode}>
<div className="flex flex-col gap-2">
<OptionButton value="window">Open in window</OptionButton>
<OptionButton value="tab">Open in tab</OptionButton>
<OptionButton value="disabled" disabled>Disabled option</OptionButton>
</div>
</OptionGroup>
</GroupBox>
)
}ARIA
GroupBox renders a native fieldset; label renders as the legend.
Keyboard
GroupBox has no own keyboard behavior. Keyboard interaction comes from the controls placed inside the fieldset.
SSR
GroupBox is presentational and renders stable markup.
Last updated on