Input
Through mouse or keyboard input content, it is the most basic form field wrapper.
When to use
- A user input in a form field is needed.
- A search input is required.
Examples
Sizes
small, middle (the default), and large map to --cb-control-height-sm, --cb-control-height-md,
and --cb-control-height-lg. Each is max() of a preferred step (--cb-control-height-base-*) and
the active pointer floor, so a density scale can retune the ladder but never take a control under its
floor. On a coarse pointer — a touch screen — --cb-control-floor becomes
--cb-control-floor-coarse (2.75rem, 44px), so small and middle both reach 44px and large keeps
its 48px, with no per-field CSS. A pointer that hovers keeps --cb-control-floor-fine (2rem, 32px).
API
Input, Input.TextArea, Input.Search, Input.Password, and Input.OTP are exported from @ceebee/ui/client.
Input
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
addonAfter | The label text displayed after (on the right side of) the input field, please use Space.Compact instead | ReactNode | - | — |
addonBefore | The label text displayed before (on the left side of) the input field, please use Space.Compact instead | ReactNode | - | — |
allowClear | Whether to show a clear icon to remove input content | boolean | { clearIcon: ReactNode, disabled?: boolean } | - | disabled: 6.4.0 |
bordered | Whether has border style, please use variant instead | boolean | true | 4.5.0 |
classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 5.4.0 |
count | Character count config | CountConfig | - | 5.10.0 |
defaultValue | The initial input content | string | - | — |
disabled | Whether the input is disabled | boolean | false | - |
id | The ID for input | string | - | — |
maxLength | The maximum number of characters in Input | number | - | — |
prefix | The prefix icon for the Input | ReactNode | - | — |
showCount | Whether to show character count | boolean | { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
status | Set validation status | 'error' | 'warning' | - | 4.19.0 |
styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 5.4.0 |
size | The size of the input box. Note: in the context of a form, the medium size is used | large | medium | small | - | — |
suffix | The suffix icon for the Input | ReactNode | - | — |
type | The type of input, see: MDN( use Input.TextArea instead of type="textarea") | string | text | — |
value | The input content value | string | - | — |
variant | Variants of Input | outlined | borderless | filled | underlined | outlined | 5.13.0 | underlined: 5.24.0 |
onChange | Callback when user input | function(e) | - | — |
onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | — |
onClear | Callback when click the clear button | () => void | - | 5.20.0 |
Input.TextArea
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
autoSize | Height auto size feature, can be set to true | false or an object { minRows: 2, maxRows: 6 } | boolean | object | false | — |
classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 5.4.0 |
styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 5.4.0 |
Input.Search
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 |
enterButton | false displays the default button color, true uses the primary color, or you can provide a custom button. Conflicts with addonAfter. | ReactNode | false | — |
loading | Search box with loading | boolean | false | — |
onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event, { source: "input" | "clear" }) | - | — |
styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 |
searchIcon | Customize the search icon | ReactNode | - | 6.4.0 |
variant | Variants of Input | outlined | borderless | filled | underlined | outlined | 5.13.0 | underlined: 5.24.0 |
Input.Password
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
classNames | Semantic DOM class | Record<SemanticDOM, string> | - | 5.4.0 |
iconRender | Custom toggle button | (visible) => ReactNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 |
styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | 5.4.0 |
variant | Variants of Input | outlined | borderless | filled | underlined | outlined | 5.13.0 | underlined: 5.24.0 |
visibilityToggle | Whether show toggle button or control password visible | boolean | VisibilityToggle | true | — |
Input.OTP
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
autoComplete | The autocomplete attribute for input elements, e.g. one-time-code for OTP autofill | string | - | 6.3.0 |
classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 |
defaultValue | Default value | string | - | — |
disabled | Whether the input is disabled | boolean | false | — |
formatter | Format display, blank fields will be filled with | (value: string) => string | - | — |
separator | render the separator after the input box of the specified index | ReactNode |((i: number) => ReactNode) | - | 5.24.0 |
styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 |
mask | Custom display, the original value will not be modified | boolean | string | false | 5.17.0 |
length | The number of input elements | number | 6 | — |
status | Set validation status | 'error' | 'warning' | - | — |
size | The size of the input box | small | medium | large | medium | — |
variant | Variants of Input | outlined | borderless | filled | underlined | outlined | underlined: 5.24.0 |
value | The input content value | string | - | — |
onChange | Trigger when all the fields are filled | (value: string) => void | - | — |
onInput | Trigger when the input value changes | (value: string[]) => void | - | 5.22.0 |
tabIndex | Set the tabIndex of the toggle button | number | 0 | 6.5.0 |
visible | Whether the password is show or hide | boolean | false | 4.24.0 |
onVisibleChange | Callback executed when visibility of the password is changed | (visible) => void | - | 4.24.0 |
blur | Remove focus | - | — | — |
focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | option - 4.10.0 | — |