FieldPanel

FieldPanel frames content with the sunken inset border used by list boxes, file panes, and output areas.

Because FieldPanel is a frame primitive, place text inside padded content rather than directly against the inset border.

Props

Prop	Type	Default	Description
`variant`	`'field' \| 'sunken'`	`'field'`	`field` uses the window background; `sunken` uses the button-face background for output/display panels.
`disabled`	`boolean`	`false`	Switches to disabled field colors and exposes `aria-disabled`.
`className`	`string`	-	Sets dimensions or extra layout classes.
`children`	`ReactNode`	-	Content rendered inside the panel.

Examples

File list field

AUTOEXEC.BAT
COMMAND.COM
CONFIG.SYS
README.TXT
SETUP.EXE
WIN.COM

import { FieldPanel } from '@murasaki/react98'
 
const files = ['AUTOEXEC.BAT', 'COMMAND.COM', 'CONFIG.SYS', 'README.TXT', 'SETUP.EXE', 'WIN.COM']
 
export function FieldPanelBasicDemo(): React.ReactElement {
  return (
    <FieldPanel className="h-28 w-64">
      <ul className="m-0 list-none p-1.5">
        {files.map(file => (
          <li key={file} className="px-1 py-0.5 hover:bg-(--hilight) hover:text-(--hilight-text)">
            {file}
          </li>
        ))}
      </ul>
    </FieldPanel>
  )
}

Sunken output panel

Output

The operation completed successfully.

import { FieldPanel } from '@murasaki/react98'
 
export function FieldPanelSunkenDemo(): React.ReactElement {
  return (
    <FieldPanel variant="sunken" className="h-24 w-72">
      <div className="p-2 text-(--window-text)">
        <p className="m-0">Output</p>
        <p className="m-0">The operation completed successfully.</p>
      </div>
    </FieldPanel>
  )
}

ARIA

FieldPanel does not assign a role. Add role="listbox", role="region", or labels when the content needs semantics.

Keyboard

FieldPanel does not add keyboard behavior. Keyboard interaction belongs to the content it frames.

SSR

FieldPanel owns no state. Its custom scrollbars hydrate from measured overflow after mount.