A text field for forms and search.
$ pnpm dlx shadcn@latest add https://dashral.com/r/input.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/input.jsonAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:
{
"registries": {
"@dashral": "https://dashral.com/r/{name}.json"
}
}Then add components by name:
$ pnpm dlx shadcn@latest add @dashral/inputUsage
import { Input } from "@/components/dashral/input"
<Input label="Email" type="email" placeholder="you@example.com" required />Examples
Text and buttons
prefix and suffix also take text, units, or a button like Copy; a password field brings its own show/hide button.
Error, required, read-only, disabled and file
A message in error shows under the field; error={true} only shows the style. readOnly tints the box and mutes the text.
Card payment
format="card" groups the number and finds the brand; expiry and CVC take digits only; onValueChange gives the raw digits.
Formats
phone, date (in the locale's order), time, number with decimals, and any pattern such as a tax ID; the raw value is under each.
File
type="file" styled like the other fields: a quiet "Choose file" button, with label, description and error.
API reference
Input
Also takes every prop of <input>(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
label | ReactNodeShown above, linked to the control. | — |
description | ReactNodeA hint under the control. | — |
error | boolean | ReactNodetrue shows the error style; a message also shows under the control. | — |
labelAction | ReactNodeAt the end of the label's row, e.g. a “Forgot password?” link or the current value. | — |
withAsterisk | booleanMarks the label with an asterisk, e.g. alongside required. | false |
prefix / suffix | ReactNodeInside the box, before or after the text: an icon, text, or a button. | — |
unstyled | booleanDrops the border, background and focus ring. | false |
revealable | booleanWith type="password": a button at the end that shows and hides the password, after any suffix. false turns it off. | true |
format | "card" | "phone" | "date" | "expiry" | "time" | "number" | { type: "number", decimals } | { pattern }Formats as you type and keeps the caret in place: card groups and brand, the locale's date order, thousands separators, or a pattern (# digit, A letter). Sets the keyboard and autofill hints. No library. | — |
onValueChange | (raw, { formatted, brand }) => voidWith format: the raw value (digits, or "1234.5" for numbers), the text as shown, and a card's brand. | — |
classNames | { root, label, wrapper, input, prefix, suffix, description, error }Classes for each part. | — |
className | stringExtra classes, merged with cn() so yours win. | — |
Accessibility
- With label, description or error, the id, aria-describedby and aria-invalid are wired up for you.
- Without a label, give it an aria-label.
- An icon-only button in suffix needs an aria-label.
- The password button is named "Show password" or "Hide password" (translated), with aria-pressed; it doesn't take the focus from the field when clicked.