InputBase

This component is a container for input components like:

It allows to set start- and end-adornments, set loading, readOnly, disabled state etc., trap interactions and disable them when necessary

Component API

Prop	Default	Description
`id`	—	`string` ID of the element
`label`	—	`React.ReactNode` Label
`helperText`	—	`string` Helper text of the element
`size`	`md`	`sm \| md \| lg` Size of the element
`variant`	`contained`	`contained \| outlined \| text` Variant of the element
`loading`	—	`boolean` Is component in loading state? Shows loader and disables interactions.
`color`	—	`primary \| error \| warning \| success \| info \| mono \| undefined` Status
`cx`	—	`{ "container": { "inner": "string", "outer": "string" }, "input": "string" }` Class names to add to wrapping InputBase component. Separately modify inner and outer container or input
`disabled`	—	`boolean` Is component disabled? This will disable all interactions with component and styling.
`readOnly`	—	`boolean` Is component read only? This will disable all interactions with component.
`endAdornment`	—	`React.ReactNode` Element provided to component on the right side
`startAdornment`	—	`React.ReactNode` Element provided to component on the left side
`clearable`	—	`boolean` Is input clearable? Shows clear button on input. The clear button will appear in place of `endAdornment` or on the left of it if exists.
`required`	—	`boolean` Is value required? Adds asterisk at the end of label.
`onClear`	—	`() => void` Callback function called on clear button click. Requires `clearable` to be set to true.
`error`	—	`string` Error message. If truthy, shows error message instead of `helperText` value and styles everything with color assigned to `error-500`.