1. Docs
  3. Components
  5. TextField

TextField

A text field allows a user to enter a plain text value with a keyboard.

Docs

Component textfield-demo not found in registry.

Installation

npx shadcn@latest add @kanpeki/textfield

Usage

Single import

import { TextField } from "~/components/ui/text-field";
<TextField.Provider>
  <TextField.Root>
    <TextField.Slot />
    <TextField.Input />
    <TextField.Slot />
  </TextField.Root>
</TextField.Provider>

Multiple imports

import {
  TextFieldProvider,
  TextFieldRoot,
  TextFieldSlot,
  TextFieldInput,
} from "~/components/ui/text-field";
<TextFieldProvider>
  <TextFieldRoot>
    <TextFieldSlot />
    <TextFieldInput />
    <TextFieldSlot />
  </TextFieldRoot>
</TextFieldProvider>

Examples

Default

Component textfield-demo not found in registry.

With Icon

Component textfield-with-icon not found in registry.

With Label

Component textfield-with-label not found in registry.

Password

Component textfield-password not found in registry.

Form

Component textfield-form not found in registry.

TextAreaToast