Component
FormatInput
A text field preset for email, URL, or telephone — sets type, inputMode, and autocomplete.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/format-inputExamples
Live previews render through the docs app's PandaCSS codegen.
<FormatInput aria-label="Email" format="email" placeholder="you@stalk-ui.com" />
<FormatInput aria-label="Website" format="url" placeholder="https://stalk-ui.com" />
<FormatInput aria-label="Email" format="email" showValidity placeholder="Type a valid email" />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `align` | `InputAlign` | No | - | - |
| `className` | `string` | No | - | Root className. |
| `defaultValue` | `string` | No | - | - |
| `format` | `InputFormat` | Yes | - | Selects the input semantics: type, inputMode, autocomplete, and restriction. |
| `formatValue` | `(value: string) => string` | No | - | Reformat the value on every keystroke (format-as-you-type), after the format's<br />character restriction runs. The caret is preserved by distance from the end.<br />e.g. group phone digits: \`(v) => v.replace(/(\d{3})(\d)/, '($1) $2')\`. |
| `invalid` | `boolean` | No | - | - |
| `onValidityChange` | `(valid: boolean \ | null) => void` | No | - |
| `rootProps` | `Omit<InputRootProps, 'children' \ | 'className' \ | 'disabled' \ | 'size'>` |
| `showValidity` | `boolean` | No | - | Show a success check once the field holds a valid, non-empty value. |
| `size` | `InputSize` | No | - | - |
| `validLabel` | `string` | No | - | Accessible label announced alongside the validity check. |
| `value` | `string` | No | - | - |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
No recipe variants are documented for this component.
Registry
Files this component contributes to your registry install.
- Manifest: `/r/format-input.json`
- Recipe: ``
- Files: `src/components/ui/format-input.tsx`