Text Input

Sizes and Width

Get small to large text inputs easily by using the size prop. Text Inputs are block elements. You can change the width of them using the width prop.

import { TextInput } from 'chic-ui';

<TextInput placeholder='Type something...' size='large' />
<TextInput placeholder='Type something...' width='300px' size='small'/>

Icons

Use icons within the text input using the icon prop.

import { TextInput } from 'chic-ui';

<TextInput className="single" placeholder="Enter Full Name" icon={FaUserAlt} />;

Types

Text Inputs can have error, disabled and readonly types.

import { TextInput } from "chic-ui";
<TextInput placeholder="Errorrrr Eroooorrr!" width="400px" error />
<TextInput placeholder="Disabled Input 😴" width="400px" disabled />
<TextInput placeholder="You can only read me 😈" width="400px" readonly />

Clearable

To clear the input, add the clearable prop and the UseState hook.

import React, { useState } from 'react';
import { TextInput } from 'chic-ui';

const Clearable = () => {
    const [value, setValue] = useState('');
return (
    <TextInput
    placeholder="Type and clearrr..."
    width="400px"
    value={value}
    onChange={(e) => setValue(e.currentTarget.value)}
    clearable
    />;
)}

API

import { TextInput } from 'chic-ui';

Name	Type	Default	Description
width	string	'100%'	Width of Text Input
size	'small' | 'default' | 'large'	'default'	Size of Text Input
icon	ElementType		Add icons to Text Input
error	boolean	false	Shows Error Text Input
disabled	boolean	false	Disable Text Input
readonly	boolean	false	ReadOnly Text Input
clearable	boolean	false	Clearable Text Input
value	string		Set Value for Text Input
onChange	ChangeEventHandler: HTMLInputElement		Handles value changes
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component