Input

Text, textarea, dimension, and tag fields with built-in label, hint, and error treatment.

Project Title*

The project type will be added automatically

Project Title*

Project title is required

Disabled

Unavailable.

With leading icon

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/input.json

Usage

Each field is a single component that owns its label, hint, and error treatment. Drop in `iconLeading` / `iconTrailing` for inline glyphs.

TSImport

import {
  TextField,
  TextareaField,
  NumberInput,
  FileSizeInput,
  TagsInput,
  DurationInput,
  RepeatableInput,
} from "@/components/ui/input";

TSExample

import { SearchIcon } from "lucide-react";
import { TextField } from "@/components/ui/input";

export function Example() {
  return (
    <TextField
      label="Project title"
      placeholder="Enter project title…"
      caption="The project type will be added automatically."
      iconLeading={SearchIcon}
      required
    />
  );
}

Composition

Anatomy of the input primitives.

TextField                       (label + caption + input in one component)
├── Label                       (renders if `label` is passed)
├── Caption                     (renders if `caption` is passed — under the label)
├── (iconLeading)               (lucide icon component)
├── <input>
├── (iconTrailing)              (lucide icon component)
└── error                       (rendered below the control in red)

TextareaField                   (same surface, multi-line + optional character count)
FileSizeInput                   (width × height + unit selector)
TagsInput                       (chip list driven by Enter / Tab / , / paste)
DurationInput                   (segmented d/h/m/s field, value in total seconds)

Text field

Compound component with label, hint, and error — ported from PRF4’s Untitled UI field.

Project Title*

The project type will be added automatically

Project Title*

Project title is required

Disabled

Unavailable.

With leading icon

Input types

Every native HTML type the team regularly reaches for, using the shadcn Input primitive.

Full name

Username

Your unique identifier

Email address

Validates format on blur.

Phone number

US format auto-applies as you type.

Password

Must be at least 8 characters

Website

Amount

Handle

Member #

3- or 4-digit account number.

Number field

Numeric input with stepper buttons. Pass `min`, `max`, and `step` for range/granularity. Drives the number-field renderer in @thesqd/dynamic-forms.

Seats

Maximum 50 seats per workspace.

Quantity

Quantity must be at least 1.

File size

Width × height with a unit selector (inches, cm, mm, pixels, points). Pair with a Label for document dimensions, canvas sizes, or print bleeds.

Artwork size

Output: {"h":null,"w":null,"unit":"in"}

Pixel canvas

Output: {"h":null,"w":null,"unit":"px"}

pixels

Inline (display / edit)

Click the pencil to split into editable cards; ✓ to converge.

Textareas

Multi-line text input with and without validation.

Bio

Tell us a bit about yourself.

Message

With dictation

Uses Chrome's Web Speech API — button hides in other browsers.

Error state

This field is required

Tags input

Multi-value input that commits each entry as a Squad Badge chip on Enter / Tab / comma. Backspace on an empty draft removes the previous chip; paste a comma- or newline-separated list to bulk-add.

Topics

Press Enter / Tab / , to add. Backspace to remove the last tag.

Sermon seriesEasterOutreach

Capped at 3

The fourth tag is silently rejected.

VolunteersWorship

Duration input

Segmented time-duration field with configurable units (d/h/m/s). Segments auto-advance on fill and support keyboard navigation.

Hours / Minutes / Seconds

Total: 7384s

Minutes / Seconds

Days / Hours / Minutes

Disabled

Repeatable input

A single input that grows into a list. Click the + ghost button next to any row to insert another input below it; the response is a `string[]`. Set `min` (defaults to 1) and an optional `max` to bound the row count.

Reference URLs

Click + to add another URL. Outputs a string[].

Invite emails

Min 2, max 5.

Autocomplete

Pass `autocomplete` with a flat `items` array (`string[]` or `{ label, value }[]`) to turn the input into a suggest-as-you-type field. It filters live, reveals every option on focus, and shows a clear button once there's a value.

Autocomplete with descriptions

Add a `description` to any option to render a secondary line under the label — useful for disambiguating similar entries.

Autocomplete with icons

Add an `icon` to any option to render a leading glyph next to the label.

API Reference

Props exposed by each input primitive.

TextField

Prop	Type	Default	Description
`label`	string	—	Renders an associated <Label> above the input.
`caption`	string	—	Helper copy shown below the input. Hidden when `error` is set.
`error`	string	—	Error message — toggles the red focus ring + red helper line.
`required`	boolean	—	Marks the label with a red asterisk.
`iconLeading`	ComponentType<{ className?: string }>	—	Lucide icon component rendered inside the leading slot.
`iconTrailing`	ComponentType<{ className?: string }>	—	Lucide icon component rendered inside the trailing slot.
`type`	"text" \| "email" \| "tel" \| "password" \| "url" \| "number" \| "search" \| …	"text"	Native HTML type. `email` and `tel` get blur-time validation hooks.
`invalidMessage`	string	—	Error message to surface when the built-in email/tel validator rejects the value.
`onValidityChange`	(valid: boolean) => void	—	Fires with the result of the email/tel validator on blur.

TextareaField

Prop	Type	Default	Description
`label`	string	—	Renders an associated <Label> above the textarea.
`caption`	string	—	Helper copy shown below the textarea.
`error`	string	—	Error message — toggles the red treatment.
`rows`	number	3	Initial visible row count.
`showCharacterCount`	boolean	—	Render a live character count in the trailing slot.
`characterCount`	number	—	Override the displayed character count.
`trailingContent`	ReactNode	—	Custom node rendered below-right (e.g. dictation button).

NumberInput

Prop	Type	Default	Description
`value`	number	—	Controlled value.
`defaultValue`	number	0	Uncontrolled initial value. When value is 0 the input displays empty (placeholder shown).
`onValueChange`	(value: number) => void	—	Fires with the parsed numeric value on every change.
`min`	number	—	Lower bound — decrement button disables when reached.
`max`	number	—	Upper bound — increment button disables when reached.
`step`	number	1	Amount added/subtracted per stepper click.
`placeholder`	string	"0"	Placeholder shown when the value is 0 or empty.
`caption`	ReactNode	—	Helper copy shown below the input via FieldHint. Hidden when `error` is set.
`error`	boolean \| string	—	Error state. `true` applies the destructive ring only; a string also renders the inline message (`text-xs mt-1.5 text-red-500`) below the input.
`disabled`	boolean	—	Dims the field and prevents interaction.

FileSizeInput

Prop	Type	Default	Description
`value`	{ width, height, unit }	—	Controlled value. Width and height are number \| "" — unit is one of in/cm/mm/px/pt.
`onChange`	(value) => void	—	Fires whenever any of the three sub-fields change.
`allowedUnits`	Array<"in" \| "cm" \| "mm" \| "px" \| "pt">	—	Restrict the unit dropdown — defaults to all five.
`id`	string	—	Forwarded to the width input for label association.

TagsInput

Prop	Type	Default	Description
`value`	string[]	—	Controlled tag list.
`onChange`	(value: string[]) => void	—	Fires whenever a tag is added or removed.
`max`	number	—	Cap the chip count. Extras are silently rejected.
`placeholder`	string	—	Placeholder rendered inside the draft input.
`caption`	string	—	Helper text below the field.

DurationInput

Prop	Type	Default	Description
`units`	Array<"d" \| "h" \| "m" \| "s">	["h","m","s"]	Which segments to render, left-to-right.
`value`	number	—	Controlled value in total seconds.
`defaultValue`	number	0	Uncontrolled initial value in total seconds.
`onValueChange`	(totalSeconds: number) => void	—	Fires with the parsed total seconds on every change.
`disabled`	boolean	—	Dims the field and prevents interaction.

RepeatableInput

Prop	Type	Default	Description
`value`	string[]	—	Controlled list of row values. The component outputs `string[]`.
`defaultValue`	string[]	—	Uncontrolled initial list. Padded with empty strings up to `min`.
`onChange`	(value: string[]) => void	—	Fires whenever a row is added, removed, or edited.
`type`	HTMLInputType	"text"	Input type for every row — forwarded to the underlying TextField.
`placeholder`	string	—	Placeholder applied to each row's input.
`min`	number	1	Minimum number of rows. The remove button hides when at the floor.
`max`	number	—	Optional maximum. The + button disables once reached.
`label`	string	—	Renders the field label above the stack of inputs.
`caption`	string	—	Helper text rendered directly under the label.
`error`	string	—	Error message — toggles the red treatment on the first row.
`required`	boolean	—	Marks the label with a red asterisk.
`disabled`	boolean	—	Dims every row and disables the +/− buttons.