Field

Field is the core building block for every setting in the UI. It renders a row with a label on the left and a control on the right, and optionally supports sub-fields that expand below it when enabled.

import { Field } from "@/components/field";
import { Switch } from "@/components/switch";

<Field name="Enable" description="Master switch">
  <Switch
    checked={data.enabled}
    onChange={(enabled) => set({ ...data, enabled })}
  />
</Field>;

Props

Prop	Type	Default	Description
`name`	`string`	—	The label shown on the left side of the row
`description`	`string`	—	Small subtext shown below the label
`tooltip`	`string`	—	Info icon that shows a tooltip on hover
`unsafe`	`string`	—	Warning icon that shows a red tooltip on hover, use for features that could get the user banned or cause issues
`children`	`ReactNode`	—	The control(s) to render on the right side
`hasSubFields`	`boolean`	`false`	Whether this field has sub-fields that can be expanded
`subFieldsEnabled`	`boolean`	`true`	Controls whether sub-fields are accessible. Tie this to whatever toggle enables the feature
`defaultSubFieldsCollapsed`	`boolean`	`false`	Whether sub-fields start collapsed
`hide`	`boolean`	`false`	Completely removes the field from the DOM when true
`isLast`	`boolean`	`false`	Removes the bottom border on the last field in a section

Sub-fields

Sub-fields are nested fields that appear below the parent when expanded. The first child of Field is always the main control, and any additional children become sub-fields. Use hasSubFields and subFieldsEnabled together to tie the sub-fields to a toggle:

<Field
  name="Walkspeed"
  description="Override the player movement speed"
  hasSubFields
  subFieldsEnabled={data.walkspeed_enabled}
>
  {/* first child = main control */}
  <Switch
    checked={data.walkspeed_enabled}
    onChange={(walkspeed_enabled) => set({ ...data, walkspeed_enabled })}
  />

  {/* additional children = sub-fields */}
  <Field name="Speed">
    <Slider
      value={data.walkspeed}
      onChange={(walkspeed) => set({ ...data, walkspeed })}
      min={1}
      max={100}
      step={1}
    />
  </Field>
</Field>

When subFieldsEnabled is false the sub-fields are hidden and the expand button is removed. When it switches to true the sub-fields automatically expand.

Hiding Fields

Use hide to conditionally remove a field based on another value. This is cleaner than wrapping in a conditional since it avoids layout shifts:

<Field
  name="Fill Color"
  hide={data.gradient_enabled}
>
  <ColorPicker ... />
</Field>

<Field
  name="Gradient Top Color"
  hide={!data.gradient_enabled}
>
  <ColorPicker ... />
</Field>

tooltip shows a neutral info icon and is good for explaining what a setting does. unsafe shows a red warning triangle and should be used for settings that could cause issues — for example features that are risky or unstable:

<Field
  name="Spinbot"
  tooltip="Rotates your character rapidly"
  unsafe="This feature is highly detectable and may result in a ban"
>
  <Switch ... />
</Field>

Field

Props

Sub-fields

Hiding Fields

Tooltip vs Unsafe

On this page