Fieldset

Wraps a group of related form controls in a <fieldset>. The legend prop renders the group label in Space Mono uppercase, consistent with other input labels in the system.

Usage

import { Fieldset, TextInput, Textarea } from "nosible-ux"

export default function Example() {
  return (
    <Fieldset legend="Watchlist details">
      <TextInput label="Name" placeholder="Tech megacaps" />
      <Textarea label="Description" placeholder="Large-cap technology companies" minRows={2} />
    </Fieldset>
  )
}

Examples

Alert configuration group

Accessibility

<fieldset> + <legend> is the correct HTML pattern for grouping related inputs. Screen readers announce the legend when the user enters the group.

Props