A SelectPanel provides an anchor that will open an overlay with a list of selectable items, and a text input to filter the selectable items
| Name | Type | Default | Description |
|---|---|---|---|
| title Required | string | A descriptive title for the panel | |
| description | string | When provided, a description is displayed below the title | |
| variant | 'anchored' | 'modal' | anchored | |
| selectionVariant | 'multiple' | 'single' | 'instant' | multiple | |
| onSubmit | (event: React.FormEvent) => void | Function that will be called when the panel is closed | |
| onCancel | () => void | Function that will be called when the selection is submitted | |
| onClearSelection | () => void | Function that will be called when the clear selection is selection | |
| anchorRef | React.RefObject<HTMLButtonElement> | Useful for defining an external anchor | |
| open | boolean | false | If defined, will control the open/closed state of the panel. |
| children | React.ReactNode[] | Recommended: | |
| width | | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'auto' | 'medium' | Sets the width of the Dialog, pick from our set list of widths, or pass |
| height | | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'fit-content' | 'large' | Sets the height of the |
| Name | Type | Default | Description |
|---|---|---|---|
| children Required | React.ReactElement | ||
Additional props are passed to the <Button> element. See Button docs for a list of props accepted by the <Button> element. | |||
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Rendered before the list. Recommended: |
| Name | Type | Default | Description |
|---|---|---|---|
| onChange | React.ChangeEventHandler<HTMLInputElement> | Callback when input text changes, use this for search/filter | |
| loading | boolean | Useful for subtle loading states while fetching items asynchronously | |
Additional props are passed to the <TextInput> element. See TextInput docs for a list of props accepted by the <TextInput> element. | |||
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Optional: |
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'button' | 'link' | 'checkbox' |
| Name | Type | Default | Description |
|---|---|---|---|
| children | string |
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'warning' | 'error' | 'empty' | ||
| size | 'inline' | 'full' | ||
| title | string |
| |
| children | React.ReactNode |