Forms
Input
Displays a form input field or a component that looks like an input field.
Import
import { Input } from "@countryclub/ui-react";Default
Disabled
Invalid
Set aria-invalid to flag the field and pair it with an error message.
Sizes
Leading Icon
Leading Dropdown
Embed a borderless Select inside an InputGroup addon — e.g. a country code for phone numbers.
Trailing Dropdown
A price input with a currency picker on the right.
Leading Text
Payment Input
Card number, expiry and CVC with automatic formatting as you type.
Trailing Button
A read-only invite link with a copy button.
File Upload
Password Input
Toggle visibility with the trailing eye button.
Number Input Horizontal
Number Input Vertical
Stack the stepper buttons on the trailing edge.
Tag Input
Tags collect inside the field — press Enter to add, Backspace to remove the last one.
Tag Input Outer
Tags collect below the field instead of inside it.