Prism

Homecomponentsinput

Alpha

This component is in development. There could be breaking changes made to it in a non-major release of Prism. Please use with caution.

Overview

Create a text input that aids in filtering and selecting multiple items from a list of options. It also supports most of the features of the TextField.

Here's an example of a simple MultiSelect.

Your Car Manufacturers

Open in Playroom

Empty State

Use emptyState property to show when there are no options available.

Your Car Manufacturers

Open in Playroom

Disabled

Use disabled property to prevent any interaction with the MultiSelect.

Your Car Manufacturers

Open in Playroom

Highlight search matches

Use highlightMatches property to highlight found matches in MultiSelect dropdown.

Your Car Manufacturers

Open in Playroom

API

onQueryChange

Required

Called when the query is changed.

(value: string) => void

value

Required

The selected option.

MultiSelectOption[]

onChange

Required

Called when a selection is made.

(value: MultiSelectOption[]) => void

options

Required

The options to display.

MultiSelectOption[]

emptyState

Required

The text or element to show when no matches found.

string

name

Required

Name for the field.

string

query

The query.

string

highlightMatches

Highlights the matches if true.

true

false

ID of the field.

string

disabled

Disables the field.

true

false

label

Adds a label to the field.

string

tip

Tooltip shown next to the label.

string

secondaryLabel

Adds a secondary label to the field.

ReactNode

description

Note shown below the field.

string

errorMessage

Displays an error message under the field.

string

onBlur

Action to perform when the field is blurred.

FocusEventHandler<HTMLInputElement>

onKeyDown

Action to perform when a key is pressed.

KeyboardEventHandler<HTMLInputElement>

size

Size of the field.

small

regular

textAlign

Aligns the text horizontally.

center

end

start

data

An object with the data keys and values.

DataAttributeMap

placeholder

Placeholder of the text field.

string

required

Indicates the field is required.

true

false

maxLength

Maximum character length for an field.

number

ref

Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

Ref<HTMLInputElement>

key

Key | null