Form

Input

Storybook

Inputs on websites are interactive elements that allow users to perform specific actions, such as submitting a form, navigating to another page, or making a purchase.

Import

1import { Input } from 'dd360-ds'

1import Input from 'dd360-ds/Input'

Usage

1import { Input } from 'dd360-ds'
2
3<Input />

Variants

The "Input" comes with variants, by default it uses the "default" variant, but you can also use these: "active", "disabled", "warning", "success","error","default".

1import { Input } from 'dd360-ds'
2
3<Input variant='default' />
4<Input variant='active' />
5<Input variant='success' />
6<Input variant='warning' />
7<Input variant='error' />
8<Input variant='disabled' />

Types

The "Input" comes with types, by default it uses the "text" variant, but you can also use these: "number", "text", "email", "currency", "date", "password", "year", "month", "percentage", "file".

1import { Input } from 'dd360-ds'
2
3<Input type='text' />

Disabled

For disabled Inputs, use the "disabled" prop.

1import { Input } from 'dd360-ds'
2
3<Input disabled />

Currency

For currency Inputs, use the "type='currency'" prop.

1import { Input } from 'dd360-ds'
2
3<Input type='currency' prefix='$' value='1000' /> //$1,000.00

Label

For label Inputs, use the "label" prop.

1import { Input } from 'dd360-ds'
2
3<Input label='Email' />

Not borders

For hidde borders Inputs, use the "inputBlank" prop.

1import { Input } from 'dd360-ds'
2
3<Input inputBlank />

Large

For expansive size inputs, use the "large" prop.

1import { Input } from 'dd360-ds'
2
3<Input large />

boxShadow

Change boxShadow input, use the "boxShadow" prop with your variants: "sm", "base", "md", "lg", "xl", "2xl", "inner", "none".

1import { Input } from 'dd360-ds'
2
3<Input boxShadow='inner' />

Input with icon

1import { Input } from 'dd360-ds'
2import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
3
4<Input startAdornment={<DynamicHeroIcon icon='AcademicCapIcon' className='text-blue-700 w-6' />} />
5<Input endAdornment={<DynamicHeroIcon icon='AcademicCapIcon' className='text-blue-700 w-6' />} />

isRequired

With the prop isRequired you can mark an input as required. Setting isRequired to true will add an asterisk (*) next to the entry to indicate that its completion is required. This functionality is especially useful for highlighting the need to fill in certain fields on forms or user interfaces.

1import { Input } from 'dd360-ds'
2
3<Input isRequired label='This field is required' />

API Reference

Currency

When the type prop is currency.