Input
Retrieve text input from a user.
Usage
First of all, you need to import the Input component from the kitchn package.
import { Input } from "kitchn"Default
Sizes
Sizes, prefix, and suffix
Disabled
Prefix and suffix
Prefix and suffix disabled
Clearable
Types
Error
Label
Props
| Name | Type | Default | Required | Description | Accepted values | 
|---|---|---|---|---|---|
| placeholder | string | - | - | The placeholder of the input. | - | 
| prefix | JSX.Element|string | - | - | The prefix of the input. | - | 
| suffix | JSX.Element|string | - | - | The suffix of the input. | - | 
| initialValue | string | - | - | The initial value of the input. | - | 
| value | string | - | - | The value of the input. | - | 
| disabled | boolean | false | - | The status of the input (disabled or not). | - | 
| prefixStyling | boolean | true | - | The status of the prefix (styled or not). | - | 
| suffixStyling | boolean | true | - | The status of the suffix (styled or not). | - | 
| prefixContainer | boolean | true | - | The status of the prefix container (whether there is one or not). | - | 
| suffixContainer | boolean | true | - | The status of the suffix container (whether there is one or not). | - | 
| clearable | boolean | false | - | The type of the input (clearable or not). | - | 
| width | number|string | - | - | The width of the input. | - | 
| error | string | - | - | The error message of the input. | - | 
| readOnly | boolean | false | - | The type of the input (read-only or not). | - | 
| onClearClick | (event: React.MouseEvent<HTMLDivElement>) => void | - | - | The click event handler of the input's clear button. | - | 
| readOnly | boolean | false | - | The type of the input (read-only or not). | - | 
| type | string | - | - | The type of the input. | primary,secondary,info,success,warning,danger,light,dark | 
| label | string | - | - | The label of the input. | - |