Label

Label is a themed <label> primitive. It applies the Windows 98 pixel-font color and non-selectable text, plus a disabled visual state, and otherwise renders a plain label element. Compose it next to any control and connect the two with htmlFor / id.

Field components such as TextBox, NumberBox, and SelectNative render this same primitive internally for their built-in label prop, so a standalone Label stays visually consistent with them.

Props

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Applies the grayed-out disabled text style.
`htmlFor`	`string`	-	Associates the label with a control by its `id`.
`className`	`string`	-	Adds custom classes to the label.
`children`	`ReactNode`	-	Label content.

Any other native <label> attributes are forwarded.

Examples

Labelled fields

User name

Domain (unavailable)

import { Label, TextBox } from '@murasaki-io/react98'
 
export function LabelBasicDemo(): React.ReactElement {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 260 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <Label htmlFor="label-demo-user">User name</Label>
        <TextBox id="label-demo-user" defaultValue="Guest" />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <Label htmlFor="label-demo-domain" disabled>Domain (unavailable)</Label>
        <TextBox id="label-demo-domain" defaultValue="WORKGROUP" disabled />
      </div>
    </div>
  )
}

ARIA

Label renders a native <label> element. Point it at a control with htmlFor matching the control’s id so assistive technology and click-to-focus behavior work natively.

SSR

Label is a client component through the package root and renders identical markup on the server and client.