Component <Input />
Props
| Props | Type | Meaning | Possible values |
|---|---|---|---|
| inputSize | string | Change input size | sm / md |
| layout | string | Change input general styles | filled / outlined |
| shape | string | Change borders shape | rounded / squared |
| label | string | Add input label | string |
| msg | string | Add message below the input. Color depends on status | string |
| status | string | Set input status | success / error |
| iconBefore | node | Add icont before the text | element |
| iconAfter | node | Add icont after the text | element |
States
Examples:
<Input placeholder="Enter some text..." />
<Input placeholder="Enter some text..." disabled />
Sizes
Examples:
<Input inputSize="sm" placeholder="Enter some text..." />
<Input inputSize="md" placeholder="Enter some text..." />
Shape
Examples:
<Input shape="rounded" placeholder="Enter some text..." />
<Input shape="squared" placeholder="Enter some text..." />
Layouts
Examples:
<Input layout="filled" placeholder="Enter some text..." />
<Input layout="outlined" placeholder="Enter some text..." />
With label
Example:
<Input label="Enter some text" placeholder="Here..." />
Statuses and message
Examples:
<Input msg="Just type somethig" placeholder="Enter some text..." />
<Input msg="Well done!" placeholder="Enter some text..." status="success" />
<Input msg="Try again" placeholder="Enter some text..." status="error" />
Just type somethig
Well done!
Try again
With icons
Examples:
<Input iconBefore={<i className="icon-search" />} placeholder="Enter some text..." />
<Input iconAfter={<i className="icon-info" />} placeholder="Enter some text..." />
<Input iconAfter={<i className="icon-x-mark" />} iconBefore={<i className="icon-heart" />} placeholder="Enter some text..." />
With mask
Examples:
<Input mask="***-***-***" />
<Input mask="(**)***-**-**" value={98} onChange={event => console.log(event)} />