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.

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.

NameTypeDefaultDescription
actionsAction[]Pass an array of Action objects to append button(s) inline with the Input.
classNamestringAdditional CSS classes.
defaultValuestringIf 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.
disabledbooleanDisable the control. The browser defaults to false.
idstringSets 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.
infoReactNodeIt is recommended to pass a simple string to offer guidance. Text will be styled based on status prop.
labelReactNodePass a string or a fragment with an Icon and string.
labelHiddenbooleanVisually hides the label region.
namestringSets html name attribute for the underlying control. Useful for mapping to a data field.
placeholderstringPlaceholder text. The browser defaults to an empty string.
readOnlybooleanMakes the input non editable and non clickable. The browser defaults to false.
requiredbooleanIndicate 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.
valuestringCreates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team.

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.

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
        •       }
      •     }
    •   }
}