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


import { Input } from "@deca-ui/react"


<Input label="Email Address" placeholder='e.g.'/>


Use the size prop to change the size of the Input. You can set the value to sm, md, or lg.

<Input size="sm" label="Email Address" placeholder='e.g.'/>
<Input size="md" label="Email Address" placeholder='e.g.'/>
<Input size="lg" label="Email Address" placeholder='e.g.'/>

Focus Color

Use the focusColor prop to change the color of the input when focused. Note that this prop only applies when the variant is outlined. You can set the value to primary, secondary, success, warning or error.

<Input label="Primary" variant="outlined" focusColor="primary" />
<Input label="Secondary" variant="outlined" focusColor="secondary" />
<Input label="Success" variant="outlined" focusColor="success" />
<Input label="Warning" variant="outlined" focusColor="warning" />
<Input label="Error" variant="outlined" focusColor="error" />


Use the variant prop to change the visual style of the Input. You can set the value to solid or outlined.

<Input label="Email Address" placeholder='e.g.' variant="solid"/>
<Input label="Email Address" placeholder='e.g.' variant="outlined"/>


Use the pill prop to have a completely rounded Input.

<Input label="Email Address" placeholder='e.g.' variant="solid" pill />
<Input label="Email Address" placeholder='e.g.' variant="outlined" pill />


Use the disabled prop to disable the Input.

<Input label="Email Address" placeholder='e.g.' disabled />

Made by Heril Saha