TextField

Enter a plain text value.

Documentation: React Aria
Pattern: W3C ARIA
Source: GitHub
Issues: Report
Composes: Field
Install: pnpm dlx @kkga/shim add text-field

First nameVisible to others

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

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

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

export default () =>
  ([1, 2, 3, 4] as const).map((size) => (
    <TextField
      key={size}
      label="First name"
      labelPosition="side"
      placeholder="John"
      size={size}
    />
  ));

Variant

Use the variant prop to choose the visual treatment.

First name

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

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