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. | - |