Field

Field sets and fields with shadcn/ui's Field API, drawn the way the game groups controls: the titled group box, and settings sections of striped rows.

Installation

npx shadcn@latest add https://osrsui.com/r/field.json

Group box

The game’s main way of grouping controls: a bevelled inset with an orange title centred on top (“Pouch”, “Bank Fillers”, “Relics”). It’s the default FieldSet.

<FieldSet>
  <FieldLegend>Deposit</FieldLegend>
  <Field>
    <FieldLabel htmlFor="worn">Worn items</FieldLabel>
    <Checkbox id="worn" />
  </Field>
</FieldSet>

Settings sections

variant="section" gives the All Settings look: a white title band over striped rows. A Field is horizontal by default (label left, control right). Use orientation="vertical" for a centred title and description above the control, as the game does for sliders.

<FieldSet variant="section">
  <FieldLegend>Display</FieldLegend>
  <Field orientation="vertical">
    <FieldContent className="items-center">
      <FieldTitle>Screen Brightness</FieldTitle>
      <FieldDescription>Change the level of brightness…</FieldDescription>
    </FieldContent>
    <Slider defaultValue={40} />
  </Field>
  <Field>
    <FieldLabel>Hitsplat tinting</FieldLabel>
    <Checkbox />
  </Field>
</FieldSet>

Parts

Labels

A FieldLabel names the control in the same Field: inputs, selects, checkboxes, radio groups, number fields and sliders are all labelled by it, and clicking the label focuses the control. A FieldDescription is read out with the control too.

Density

density gives the label and control more room inside each stripe than the game’s own rows, for settings outside a game window.