Installation
You can add this input component using our CLI or manually:
npx untitledui add input
Input examples
Below are examples and variations of this input component:
$
FAQs
You can validate input fields by using the isInvalid prop to mark the field as invalid. Use the hint prop to display validation messages to the user. The component automatically shows an error icon when isInvalid is true.
Yes, you can add custom icons to input fields using the icon prop, which accepts a React component. The icon should accept className and other HTML attributes for proper styling and will be positioned on the left side of the input.
Input fields support two sizes: "sm" (small) and "md" (medium). You can set the size using the size prop on the Input component. The default size is "sm".
You can add tooltips using the tooltip prop, which displays a help icon with a tooltip on hover. Use the hint prop to show persistent help text below the input field. Both can be used together for comprehensive user guidance.
Yes, you can use specialized input components: InputWithButton for adding action buttons, InputWithDropdown for leading/trailing dropdowns, InputWithPrefix for text prefixes/suffixes, and PaymentInput for credit card inputs with automatic card type detection.
Input components work seamlessly with standard HTML forms and React Aria. Provide a name prop to each input for form data collection. You can use controlled components with value and onChange props or uncontrolled components with defaultValue.
You can add keyboard shortcuts using the shortcut prop. Pass a string to display custom shortcut text, or pass true to show the default "⌘K" shortcut. The shortcut appears as a badge on the right side of the input.