components

Input

Capture text or data with customizable inputs

Source Code

Installation

pnpm dlx radianui@latest add input

Usage

Imports

components/ui/input.tsx
import {
	Input,
	InputAddon,
	InputGroup,
	InputWrapper,
} from "@/components/ui/input"

Code

components/ui/input.tsx
<Input placeholder="Enter username" />
 
<InputGroup>
    <InputAddon mode="icon">
        <Mail />
    </InputAddon>
    <Input type="email" placeholder="designer@radianos.com" />
</InputGroup>
 
<InputWrapper>
    <Mail />
    <Input type="email" placeholder="designer@radianos.com" />
</InputWrapper>

Examples

Input Sizes

Disabled Input

Error Input

Please enter a valid email address

Input Wrapper

Input Groups

Email

URL

https://

Number

Color Input

Credit Card

Creditimg1
Creditimg2
Creditimg3
Hint text to help with input

Search with Suggestions

Input with clear button

Password

Password Toggle On Focus

Password Toggle Visible

Password With Validation

Your Password must contain

At least 8 characters

At least one number

At least one lowercase letter

At least one uppercase letter

Input Form

Sign In

Welcome! Sign in to continue

Forgot Password?

Don't have an account? Create account

Props

<Input>
NameDefaultValues
size36283236404448
External Reference--
<InputAddon>
NameDefaultValues
size36283236404448
modedefaultdefaulticon
<InputWrapper>
NameDefaultValues
size36283236404448
disabledfalseboolean