Input

A single line of text. Works alone (with its own errorMessage) or inside a Field.

Sourcecomponents/input.tsx

Default

Project name

Error

Slug

Use lowercase letters and dashes.

Disabled

Owner

Small (dense, desktop only)

Filter

Usage

Input usage

import { useState } from "react";import { Field, FieldLabel } from "@/components/field";import { Input } from "@/components/input";
export function InputUsage() {  const [name, setName] = useState("");  return (    <Field>      <FieldLabel>Project name</FieldLabel>      <Input value={name} onChange={(event) => setName(event.target.value)} placeholder="Checkout redesign" />    </Field>  );}

Input

Usage

When to use

Use when

Don’t use when