Input Types
Label Positions
Different ways to position labels relative to input fields.
Default Label
<Input
label="Name"
placeholder="Jane Doe"
labelPosition="default"
/>Overlapping Label
<Input
label="Name"
placeholder="Jane Doe"
labelPosition="overlapping"
/>Inset Label
<Input
label="Name"
placeholder="Jane Doe"
labelPosition="inset"
/>Input Variants
Different styles and shapes for input fields.
Default Style
<Input
label="Default Input"
placeholder="Type something..."
/>Pill Shape
<Input
label="Pill Shaped Input"
placeholder="Type something..."
variant="pillShape"
/>Read Only
<Input
label="Read Only Input"
value="This is read only content"
variant="readOnly"
/>Input States
Inputs in different states: error, disabled, with help text, etc.
Optional Input
Optional
<Input
label="Optional Field"
placeholder="Type something..."
optional
/>With Error
This field is required
<Input
label="Username"
placeholder="Type something..."
error="This field is required"
/>With Help Text
Must be at least 8 characters long
<Input
label="Password"
type="password"
placeholder="Enter your password"
helpText="Must be at least 8 characters long"
/>Disabled
<Input
label="Disabled Input"
placeholder="This input is disabled"
disabled
/>Password Input
Specialized input fields for password entry with visibility toggle.
Default Password Input
<PasswordInput
label="Password"
placeholder="Enter your password"
/>Password with Error
Password must be less than 4 characters
<PasswordInput
label="Password"
placeholder="Enter your password"
error="Password must be less than 4 characters"
/>Add-on Input
Input fields with additional text or elements attached.
Non-inline Add-on
https://
<AddonInput
label="Website"
addon="https://"
placeholder="example.com"
inline={false}
/>Inline Add-on
https://
<AddonInput
label="Website"
addon="https://"
placeholder="example.com"
inline={true}
/>Currency Input
Specialized input fields for monetary values.
Basic Currency Input
$
USD
<CurrencyInput
label="Amount"
placeholder="0.00"
currencyCode="USD"
/>With Currency Selection
$
<CurrencyInput
label="Amount"
placeholder="0.00"
withCurrencyChoice={true}
currencies={[
{ symbol: '$', code: 'USD' },
{ symbol: '€', code: 'EUR' },
{ symbol: '£', code: 'GBP' },
{ symbol: '¥', code: 'JPY' },
]}
/>Input with Icons
Input fields with icons for enhanced visual cues.
Left Icon
<Input
label="Search"
placeholder="Search..."
leftComponent={<MagnifyingGlassIcon className="h-4 w-" />}
/>Right Icon
<Input
label="Email"
placeholder="Enter your email"
rightComponent={<EnvelopeIcon className="h-4 w-4 " />}
/>Both Icons
<Input
label="Username"
placeholder="Enter username"
leftComponent={<UserIcon className="h-4 w-4 " />}
rightComponent={<EnvelopeIcon className="h-4 w-4 " />}
/>Specialized Inputs
Input components designed for specific use cases.
Input with Sort
<InputWithSort
label="Search Users"
placeholder="Search..."
onSortChange={(direction) => console.log('Sort direction:', direction)}
/>Phone Input
+44
<PhoneInput
label="Phone Number"
placeholder=""
defaultCountry="GB"
/>Search Input
<InputSearch
label="Search"
placeholder="Search..."
/>Input Groups
Grouped input fields for related information.
Two Columns
<InputGroup>
<InputGroupLine>
<InputWrapper>
<Input placeholder="First name" />
</InputWrapper>
</InputGroupLine>
<InputGroupLine className="divide-x border-t">
<InputWrapper>
<Input placeholder="Last name" />
</InputWrapper>
</InputGroupLine>
</InputGroup>Card Details
<InputGroup>
<InputGroupLine>
<InputWrapper>
<Input placeholder="Card number" />
</InputWrapper>
</InputGroupLine>
<InputGroupLine className="divide-x border-t">
<InputWrapper>
<Input placeholder="MM / YY" />
</InputWrapper>
<InputWrapper>
<Input placeholder="CVC" />
</InputWrapper>
</InputGroupLine>
</InputGroup>