Input

Input component is a component that is used to get user input in a text field.

Import

import { Input } from "@recastui/react";

Usage

Basic usage example of the Input component:

Editable Example

<Input placeholder='Basic usage' />

Size

The Input component comes in four sizes. The default is base.

Editable Example

<div className='space-y-2'>
		<Input placeholder='extra small size' size='xs' />
		<Input placeholder='small size' size='sm' />
		<Input placeholder='medium size' size='base' />
		<Input placeholder='large size' size='lg' />
	</div>

Variant

The input component comes in 4 variants: outline, solid, underline, and rounded. Pass the variant prop and set it to one of these values. The default variant is outline.

Editable Example

<div className='space-y-2'>
		<Input variant='outline' placeholder='Outline' />
		<Input variant='solid' placeholder='Solid' />
		<Input variant='underline' placeholder='Underline' />
		<Input variant='rounded' placeholder='Rounded' />
	</div>

Error

Editable Example

<Input placeholder='Input error' error />

Disabled

Editable Example

<Input placeholder='Input disabled' disabled />

Full width

The Input component comes full width by default its true.

Editable Example

<div className='space-y-2'>
	<Input placeholder='Full width' fullWidth />
	<Input placeholder='Width auto' fullWidth={false} />
	</div>

Addons

You can add addons to the left and right of the Input component.

Editable Example

<div className='space-y-4'>
		<div className='flex'>
		<div className='flex items-center px-3 bg-gray-3 border border-gray-7 border-r-0'>+234</div>
			<Input type='tel' placeholder='phone number' />
		</div>
		<div className='flex'>
			<div className='flex items-center px-3 bg-gray-3 border border-gray-7 border-r-0'>https://</div>
			<Input placeholder='example' />
			<div className='flex items-center px-3 bg-gray-3 border border-gray-7 border-l-0'>.com</div>
		</div>
	</div>

Password Input

Use the components to create a password input with a show/hide password functionality:

Editable Example

function PasswordInput() {
		const [show, setShow] = React.useState(false);
		const handleClick = () => setShow(!show);

		return (
			<div className='flex relative'>
				<Input
					type={show ? 'text' : 'password'}
					placeholder='Enter password'
				/>
				<Button square='xs' size='xs' variant='ghost' onClick={handleClick} className='absolute right-1 z-20 top-1/2 -translate-y-1/2'>
						{show ? <IconEye width={16} height={16} /> : <IconEyeOff width={16} height={16} />}
					</Button>
			</div>
		);
	}

Date Input

Use the components to create a date input:

Editable Example

<Input type='date' placeholder='Date input' />

Datetime Input

Use the components to create a Datetime input:

Editable Example

<Input type='datetime-local' placeholder='Datetime input' />