Input field
FREEFree and open-source React input field components built for modern applications and websites. These input fields are built using React Aria and styled with Tailwind CSS.
Installation
You can add this input component using our CLI or manually:
npx untitledui add input input-group
Input examples
Below are examples and variations of this input component:
$
FAQs
Please refer to our frequently asked questions page for more.
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 the InputGroup component to add buttons, dropdowns, and text elements to input fields. This unified component handles all input enhancements including action buttons, leading/trailing dropdowns, and text prefixes/suffixes.
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.