TextField

Enter a plain text value.

Documentation: React Aria
Pattern: W3C ARIA
Source: GitHub
Issues: Report
Composes: Field

First nameVisible to others

TextField example

import { TextField } from "@/shim-ui/text-field";

export default () => (
  <TextField
    description="Visible to others"
    label="First name"
    labelPosition="side"
    placeholder="John"
  />
);

Install

Use the CLI or copy the source code manually.

Command

Source code

pnpm dlx @kkga/shim add text-field

Label position

Use the labelPosition prop to position the label.

First nameVisible to others

Label position example

import { TextField } from "@/shim-ui/text-field";

export default () => (
  <>
    <TextField
      description="Visible to others"
      label="First name"
      labelPosition="side"
    />
    <TextField
      description="Visible to others"
      label="First name"
      labelPosition="top"
    />
  </>
);

Size

Use the size prop to adjust spacing and typography.

First name

Size example

import { TextField } from "@/shim-ui/text-field";

export default () => (
  <>
    <TextField label="First name" labelPosition="side" size={1} />
    <TextField label="First name" labelPosition="side" size={2} />
    <TextField label="First name" labelPosition="side" size={3} />
    <TextField label="First name" labelPosition="side" size={4} />
  </>
);

Variant

Use the variant prop to choose the visual treatment.

First name

Variant example

import { TextField } from "@/shim-ui/text-field";

export default () => (
  <>
    <TextField label="First name" labelPosition="side" variant="classic" />
    <TextField label="First name" labelPosition="side" variant="soft" />
    <TextField label="First name" labelPosition="side" variant="outline" />
  </>
);