| Type | Cosmos component |
|---|---|
| text | Input |
| password | Input |
| number | NumberInput |
| Input | |
| url | Input |
| search | SearchInput |
| tel | PhoneInput |
| date | DateInput |
| datetime-local | DateTimeInput |
| time | TimeInput |
| week | WeekInput |
| month | MonthInput |
| color | ColorPicker |
Input
The Input component allows users to enter and edit a single line of free-form text, often within a Form. If you would like to allow for more than one line of text input, we suggest using the TextArea component instead.
For more information on how to use the features and props for this component, check out the developer documentation.
Usage
Any keyboard text may be entered into the Input component, including numbers and symbols. The type of the Input will affect how its contents are rendered or validated. All of the types align with the native HTML input types, though we do recommend using other Cosmos components for most types. Refer to the table below to determine which component is best used for each supported type:
Inputs can be controlled or uncontrolled components. For a controlled component, make use of the value and onChange props. For an uncontrolled component, use the defaultValue prop. The Input component allows for standard Form field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info. They also support the use of actions which, if provided, will render an inline MenuButton containing the set of specified actions to configure the Input.
Related components
Properties
| Name | Type | Default | Description |
|---|---|---|---|
actions | Action[] | | Pass an array of Action objects to append button(s) inline with the Input. |
className | string | | Additional CSS classes. |
defaultValue | string | | If you wish to use an uncontrolled input, pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means. |
disabled | boolean | | Disable the control. The browser defaults to false. |
id | string | | Sets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render. |
info | ReactNode | | It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. |
label | ReactNode | | Pass a string or a fragment with an Icon and string. |
labelHidden | boolean | | Visually hides the label region. |
name | string | | Sets html name attribute for the underlying control. Useful for mapping to a data field. |
placeholder | string | | Placeholder text. The browser defaults to an empty string. |
readOnly | boolean | | Makes the input non editable and non clickable. The browser defaults to false. |
required | boolean | | Indicate if the field is required. The browser defaults to false. |
status | 'success' |'warning' |'error' | | Set visual state based on a validation state. |
type | 'text' |'password' |'number' |'email' |'url' |'search' |'tel' |'date' |'datetime-local' |'time' |'week' |'month' |'color' | "text"
| Specifies the type of input to be used. |
value | string | | Creates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team. |
Custom theming
You can override the styles of the Input component by setting a custom theme on the Configuration component. The form field configuration may also be applied to any other form control component.
Theme properties
Input
{
height:'2rem',padding:'components.form-control.padding',// → components.form-control.padding'background-color':'components.form-control.background-color',// → components.form-control.background-color'border-color':'components.form-control.border-color',// → components.form-control.border-color'border-width':'components.form-control.border-width',// → components.form-control.border-width'border-radius':'components.form-control.border-radius'// → components.form-control.border-radius}}}
FormField
{
'status-color':'base.palette.urgent'// → base.palette.urgent},
'status-color':'base.palette.success'// → base.palette.success},
'status-color':'base.palette.warn'// → base.palette.warn}}}}