Forms

Input

A text field with label, helper text, error state and optional prefix/suffix slots.

data-scope="input"

Usage

ReactVueSvelteAngular

import { Input } from "@crosskit-ui/react";

<Input label="Email" type="email" helperText="We never share it." />

<Input label="Email" type="email" helper-text="We never share it." />

<Input label="Email" type="email" helperText="We never share it." />

<input ckInput label="Email" type="email" helperText="We never share it." />

Prop	Type	Default	Notes
`variant`	"default" \| "filled" \| "outline"	`"default"`	Field style. v0 had Input take `outline` and Textarea `outlined`.
`size`	"sm" \| "md" \| "lg"	`"md"`	Control size.
`label`	ReactNode	—	Label, associated by id.
`helperText`	ReactNode	—	Hint below the field.
`invalid`	boolean	`false`	Marks the field invalid. v0 called this `error`.
`errorMessage`	ReactNode	—	Replaces helperText and wins aria-describedby.
`fullWidth`	boolean	`true`	Stretch to 100%.
`prefix`	ReactNode	—	Content before the input.
`suffix`	ReactNode	—	Content after the input.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.

v0	v1	Notes
`error`	`invalid`