Input component
Properties
| Name | Description | Default |
|---|---|---|
| autoGrow | If set, the input will auto grow in height to match the input value. You can limit the max line count by setting the prop as a number. | - |
| autoWidth | If set, the input width will match with the visual width of the input value | - |
| busy | Input busy state | - |
| description | Input description | - |
| error | Input error state | - |
| hotkey | Optional hotkey | - |
| iconLeft | Input left positioned icon | - |
| iconRight | Input right positioned icon | - |
| iconRightLabel | Input right icon label | - |
| iconRightSecondary | Input right positioned icon | - |
0-10 of 17
Auto Width
`autoWidth` property can be used to auto size the input to match the on-screen width of it's value.
A `placeholder` value should be set to prevent obscure input - empty input will match the width with placeholder's.
Maximum width can be limited by defining the `maxWidth` property.
With Hotkey
`hotkey` property can be used to provide a visual hotkey hint to the input. Note that the key funciotnallity itself is not provided.
The hotkey supports several conversions for easier use - `CtrlOrCommand` will be replaced with Ctrl or the ⌘ icon based on the user's platform. `Shift`, `Backspace`, `Enter`, `Tab` will be also replaced with the corresponding key.
Busy
When an input field is a part of a form that is currently busy (e.g. data is asynchronous validated or saved) the input field should be marked with the `busy` attribute. The component will be set as disabled, but will be visually different from `disabled` state.
Disabled
A component that is unavailable and should be ignored on form submissions, has to be marked with the `disabled` property.
Read Only
A component that is unavailable for user input changes, but should be focusable and included on form submissions, has to be marked with the `readOnly` property.
As Toggle Input
`ToggleInputButton` component can be used to display a Button element that toggles an Input element. Useful for inline search or lookup like implementations.