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

Open mode

Open in windowOpen in tabDisabled option

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.