Input

A single-line text input with an inset 1px ring, a brand focus ring, and a danger ring for the invalid state.

Available since@crisp-ui-kit/crisp@0.11.0

Heights 28/32/36px (sm/medium/large), radii r8/r8/r10, no border: the edge is one inset 1px ring that turns brand on focus.

Installation

npm install @crisp-ui-kit/crisp

Examples

Sizes

28px (sm), 32px (medium), and 36px (large). sm reuses TableToolbar's own already-measured compact search-box height (c.size.row), not a fresh Attio measurement.

Invalid state

invalid swaps the ring to the danger color and sets aria-invalid="true".

Enter a valid email address.

Disabled

Native disabled — 50% opacity, not focusable.

With label

Always pair an input with a visible <label>.

Task name

Input always renders a native <input>. For a third-party editor that needs to mount into a plain element instead — CodeMirror, a rich-text widget, a masked-input library — InputShell draws the same field chrome (ring, focus ring, radius, size, invalid/read-only states) around children unchanged. It's the outer shell only, not Input's own text-field resets (padding, font: inherit, …), which assume a real <input> and would fight a rich editor's own internal layout — a child that wants to fill the shell should set its own sizing (flex: 1 1 auto; min- width: 0; width: 100%), same as any block content in an inline-flex container.

SELECT * FROM records

Prop

Type

Accessibility

Always pair an Input with a <label> — via htmlFor/id, or aria-label/aria-labelledby for icon-only fields like search boxes. Setting invalid adds aria-invalid="true"; pair it with aria-describedby pointing at the error message so screen readers announce why the field failed. Disabled inputs are removed from the tab order automatically — this is native browser behavior, not something crisp adds.

Key	Action
`Tab` / `Shift+Tab`	Moves focus in and out of the field.
Standard text-editing keys	Native input editing behavior applies.

Focus

Focus keeps the field's 1px inset ring and recolours it to the brand hue over 140ms, as Attio's own fields do (measured on Settings > Profile). An invalid field rings critical and stays critical while focused.