Input

core package3.2.2

Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.

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.

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 Constellation components for most types. Refer to the table below to determine which component is best used for each supported type:

Type	Constellation component
text	Input
password	Input
number	NumberInput
email	Input
url	Input
search	SearchInput
tel	PhoneInput
date	DateInput
datetime-local	DateTimeInput
time	TimeInput
week	WeekInput
month	MonthInput
color	ColorPicker

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.

If there is a label and the Field is not disabled, passing an object to the additionalInfo prop that includes a heading and content will provide the user with more useful information on the Field when they click on the associated information Icon.

Example

Input

Enter some value

Suggested values

If an onResolveSuggestion callback function is provided, and the status is set to pending, the user will be prompted to accept or deny whatever suggested value populates the Input.

Example

Input

Accept AI suggestion?Either press Enter to accept the AI suggestion or edit the value to reject it

Related components

Properties

Name	Description	Default	Type
`actions`	Pass an array of Action objects to append button(s) inline with the Input.		`Action[]`
`additionalInfo`	Button when clicked will show additional information on a field		`{` `content: string \| Element;` `heading: string;` `}`
`className`	Additional CSS classes.		`string`
`defaultValue`	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.		`string`
`disabled`	Disable the control. The browser defaults to false.		`boolean`
`id`	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.		`string`
`info`	It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop.		`ReactNode`
`label`	Pass a string or a fragment with an Icon and string.		`ReactNode`
`labelHidden`	Visually hides the label region.		`boolean`
`name`	Sets html name attribute for the underlying control. Useful for mapping to a data field.		`string`
`onResolveSuggestion`			`(accepted: boolean) => void`
`placeholder`	Placeholder text. The browser defaults to an empty string.		`string`
`readOnly`	Enables read only mode		`boolean`
`required`	Indicate if the field is required. The browser defaults to false.		`boolean`
`status`	Set visual state based on a validation state.		`'error' \|'pending' \|'success' \|'warning'`
`type`	Specifies the type of input to be used.	`"text"`	`'number' \|'search' \|'password' \|'url' \|'color' \|'hidden' \|'time' \|'text' \|'month' \|'week' \|'tel' \|'email' \|'date' \|'datetime-local'`
`value`	Creates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team.		`string`

Custom theming

You can override the styles of the Input component by setting a custom theme on the Configuration component.

Example

Input

Enter some value

Theme properties

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