Field

Utility components for other form fields. Not intended to be used directly.

Source
GitHub
Issues
Report
Field description
Field example
"use client";
import {
  Description,
  fieldLayoutStyle,
  Input,
  inputBaseStyle,
  Label,
} from "@/shim-ui/field";

/**
 * Utility components used in other form fields.
 * Not intended to be used directly, unless you're building a custom field.
 */

export default () => (
  <div className={fieldLayoutStyle()}>
    <Label htmlFor="f">Label</Label>
    <Input className={inputBaseStyle()} id="f" />
    <Description>Field description</Description>
  </div>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add field

Theme variants

Showcase how fields adapt to different theme variants using the provided tokens.

Classic variant
50
Label
Label
Soft variant
50
Label
Label
Outline variant
50
Label
Label
Theme variants example
import { Checkbox, CheckboxGroup } from "@/shim-ui/checkbox";
import { Theme } from "@/shim-ui/lib/theme";
import { NumberField } from "@/shim-ui/number-field";
import { Radio, RadioGroup } from "@/shim-ui/radio-group";
import { SearchField } from "@/shim-ui/search-field";
import { Slider } from "@/shim-ui/slider";
import { TextArea } from "@/shim-ui/text-area";
import { TextField } from "@/shim-ui/text-field";

export default () => (
  <>
    <div className="flex grow-1 basis-2xs flex-col gap-3 rounded-lg border border-neutral-line p-4">
      <h5>Classic variant</h5>
      <Theme fieldVariant="classic">
        <TextField label="Label" />
        <TextArea label="Label" />
        <NumberField label="Label" />
        <Slider defaultValue={50} isFilled label="Label" />
        <SearchField label="Label" />
        <RadioGroup defaultValue="1" label="Label">
          <Radio value="1">Option</Radio>
          <Radio value="2">Option</Radio>
        </RadioGroup>
        <CheckboxGroup defaultValue={["1"]} label="Label">
          <Checkbox value="1">Option</Checkbox>
          <Checkbox value="2">Option</Checkbox>
        </CheckboxGroup>
      </Theme>
    </div>

    <div className="flex grow-1 basis-2xs flex-col gap-3 rounded-lg border border-neutral-line p-4">
      <h5>Soft variant</h5>
      <Theme fieldVariant="soft">
        <TextField label="Label" />
        <TextArea label="Label" />
        <NumberField label="Label" />
        <Slider defaultValue={50} isFilled label="Label" />
        <SearchField label="Label" />
        <RadioGroup defaultValue="1" label="Label">
          <Radio value="1">Option</Radio>
          <Radio value="2">Option</Radio>
        </RadioGroup>
        <CheckboxGroup defaultValue={["1"]} label="Label">
          <Checkbox value="1">Option</Checkbox>
          <Checkbox value="2">Option</Checkbox>
        </CheckboxGroup>
      </Theme>
    </div>

    <div className="flex grow-1 basis-2xs flex-col gap-3 rounded-lg border border-neutral-line p-4">
      <h5>Outline variant</h5>
      <Theme fieldVariant="outline">
        <TextField label="Label" />
        <TextArea label="Label" />
        <NumberField label="Label" />
        <Slider defaultValue={50} isFilled label="Label" />
        <SearchField label="Label" />
        <RadioGroup defaultValue="1" label="Label">
          <Radio value="1">Option</Radio>
          <Radio value="2">Option</Radio>
        </RadioGroup>
        <CheckboxGroup defaultValue={["1"]} label="Label">
          <Checkbox value="1">Option</Checkbox>
          <Checkbox value="2">Option</Checkbox>
        </CheckboxGroup>
      </Theme>
    </div>
  </>
);

Theme label position

Display label placement options across the theme to ensure consistency on any surface.

Label position: top
0
Label
Label
Label position: side
0
Label
Label
Theme label position example
"use client";
import { Checkbox, CheckboxGroup } from "@/shim-ui/checkbox";
import { Theme } from "@/shim-ui/lib/theme";
import { NumberField } from "@/shim-ui/number-field";
import { Radio, RadioGroup } from "@/shim-ui/radio-group";
import { SearchField } from "@/shim-ui/search-field";
import { Slider } from "@/shim-ui/slider";
import { TextArea } from "@/shim-ui/text-area";
import { TextField } from "@/shim-ui/text-field";

export default () => (
  <>
    <div className="flex grow-1 basis-2xs flex-col gap-3 rounded-lg border border-neutral-line p-4">
      <h5>Label position: top</h5>
      <Theme labelPosition="top">
        <TextField label="Label" />
        <TextArea label="Label" />
        <NumberField label="Label" />
        <Slider isFilled label="Label" />
        <SearchField label="Label" />
        <RadioGroup defaultValue="1" label="Label">
          <Radio value="1">Option</Radio>
          <Radio value="2">Option</Radio>
        </RadioGroup>
        <CheckboxGroup defaultValue={["1"]} label="Label">
          <Checkbox value="1">Option</Checkbox>
          <Checkbox value="2">Option</Checkbox>
        </CheckboxGroup>
      </Theme>
    </div>

    <div className="flex grow-1 basis-2xs flex-col gap-3 rounded-lg border border-neutral-line p-4">
      <h5>Label position: side</h5>
      <Theme labelPosition="side">
        <TextField label="Label" />
        <TextArea label="Label" />
        <NumberField label="Label" />
        <Slider isFilled label="Label" />
        <SearchField label="Label" />
        <RadioGroup defaultValue="1" label="Label">
          <Radio value="1">Option</Radio>
          <Radio value="2">Option</Radio>
        </RadioGroup>
        <CheckboxGroup defaultValue={["1"]} label="Label">
          <Checkbox value="1">Option</Checkbox>
          <Checkbox value="2">Option</Checkbox>
        </CheckboxGroup>
      </Theme>
    </div>
  </>
);

Theme size

Compare the available field sizes to confirm spacing and ergonomics within the design system.

Size 1
0
Label
Label
Size 2
0
Label
Label
Size 3
0
Label
Label
Size 4
0
Label
Label
Theme size example
"use client";
import { Checkbox, CheckboxGroup } from "@/shim-ui/checkbox";
import { Theme } from "@/shim-ui/lib/theme";
import { NumberField } from "@/shim-ui/number-field";
import { Radio, RadioGroup } from "@/shim-ui/radio-group";
import { SearchField } from "@/shim-ui/search-field";
import { Slider } from "@/shim-ui/slider";
import { TextArea } from "@/shim-ui/text-area";
import { TextField } from "@/shim-ui/text-field";

export default () => (
  <>
    <div className="flex flex-col gap-3 rounded-lg border border-neutral-line p-4">
      <h5>Size 1</h5>
      <Theme size={1}>
        <TextField label="Label" />
        <TextArea label="Label" />
        <NumberField label="Label" />
        <Slider isFilled label="Label" />
        <SearchField label="Label" />
        <RadioGroup defaultValue="1" label="Label">
          <Radio value="1">Option</Radio>
          <Radio value="2">Option</Radio>
        </RadioGroup>
        <CheckboxGroup defaultValue={["1"]} label="Label">
          <Checkbox value="1">Option</Checkbox>
          <Checkbox value="2">Option</Checkbox>
        </CheckboxGroup>
      </Theme>
    </div>

    <div className="flex flex-col gap-3 rounded-lg border border-neutral-line p-4">
      <h5>Size 2</h5>
      <Theme size={2}>
        <TextField label="Label" />
        <TextArea label="Label" />
        <NumberField label="Label" />
        <Slider isFilled label="Label" />
        <SearchField label="Label" />
        <RadioGroup defaultValue="1" label="Label">
          <Radio value="1">Option</Radio>
          <Radio value="2">Option</Radio>
        </RadioGroup>
        <CheckboxGroup defaultValue={["1"]} label="Label">
          <Checkbox value="1">Option</Checkbox>
          <Checkbox value="2">Option</Checkbox>
        </CheckboxGroup>
      </Theme>
    </div>

    <div className="flex flex-col gap-3 rounded-lg border border-neutral-line p-4">
      <h5>Size 3</h5>
      <Theme size={3}>
        <TextField label="Label" />
        <TextArea label="Label" />
        <NumberField label="Label" />
        <Slider isFilled label="Label" />
        <SearchField label="Label" />
        <RadioGroup defaultValue="1" label="Label">
          <Radio value="1">Option</Radio>
          <Radio value="2">Option</Radio>
        </RadioGroup>
        <CheckboxGroup defaultValue={["1"]} label="Label">
          <Checkbox value="1">Option</Checkbox>
          <Checkbox value="2">Option</Checkbox>
        </CheckboxGroup>
      </Theme>
    </div>

    <div className="flex flex-col gap-3 rounded-lg border border-neutral-line p-4">
      <h5>Size 4</h5>
      <Theme size={4}>
        <TextField label="Label" />
        <TextArea label="Label" />
        <NumberField label="Label" />
        <Slider isFilled label="Label" />
        <SearchField label="Label" />
        <RadioGroup defaultValue="1" label="Label">
          <Radio value="1">Option</Radio>
          <Radio value="2">Option</Radio>
        </RadioGroup>
        <CheckboxGroup defaultValue={["1"]} label="Label">
          <Checkbox value="1">Option</Checkbox>
          <Checkbox value="2">Option</Checkbox>
        </CheckboxGroup>
      </Theme>
    </div>
  </>
);