Free 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.
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.
Yes, along with the rest of React Aria's TextInputDOMProps (autoComplete, pattern, minLength, maxLength, inputMode) — useful for type="number" or type="range" usage of the plain Input.
Use the prefix and suffix props, e.g. <Input prefix="$" /> or <Input suffix=".com" />. Both render inline inside the input's border.
Pass hintProps={{ role: "alert" }} alongside hint. hintProps forwards any extra props (role, id, etc.) to the hint/error Text element.
A plain string value, not a native DOM change event — this is React Aria's useTextField value callback. Reach for onInput or a ref if you need the underlying Event.