The ListBox component allows users to select one or more options from a list contained within the component
npm install @paprika/list-boxThe ListBox component allows users to select one or more options from a list contained within the component
``
yarn add @paprika/list-box
or with npm:
`
npm install @paprika/list-box
| Prop | Type | required | default | Description |
| -------------- | ----------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------- | ------------------------------------------------------------------------------ |
| children | arrayOf | false | null | Child of type
| hasError | bool | false | false | If ListBox is in an error state |
| hasTag | bool | false | false | If there is a tag |
| hasImplicitAll | bool | false | false | Has implicit "All items selected" value when no item is selected |
| height | [string,number] | false | 200 | The maximum height for the options container. Using a number implies px units. |
| isDisabled | bool | false | false | Disables the ListBox if true |
| isInline | bool | false | false | This options will display the list-box without the Popover |
| isMulti | bool | false | false | Let the user to select multiple options at same time |
| isOpen | bool | false | false | Indicates if the popover is visible |
| isReadOnly | bool | false | false | The ListBox will not allow value to be changed |
| onChange | func | false | () => {} | Callback returning the current selection on the ListBox |
| placeholder | string | false | null | Default label for trigger when the ListBox has no option selected |
| size | [ ListBoxContainer.types.size.SMALL, ListBoxContainer.types.size.MEDIUM, ListBoxContainer.types.size.LARGE] | false | ListBoxContainer.types.size.MEDIUM | Size of the trigger and options (font size, height, padding, etc). |
| contentOffsetX | number | false | 0 | Lets the user control the X-axis offset for the ListBox content |
| contentOffsetY | number | false | 0 | Lets the user control the Y-axis offset for the ListBox content |
| Prop | Type | required | default | Description |
| -------- | ------ | -------- | ------- | ---------------------------------------------------------------------------------------- |
| id | string | false | null | DOM id attribute for focussable control (trigger element or ul element if isInline=true) |
| refLabel | custom | false | null | Ref for a DOM element containing the label for this component |
| Prop | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ------------------------ |
| children | node | false | null | Body content of the box. |
| Prop | Type | required | default | Description |
| ---------- | ---- | -------- | ------- | --------------------------------------------- |
| isDisabled | bool | false | true | isDisable is use internally as a default prop |
the prop is read by the option/helpers/optionState.js which is assigned in the store
it helps to ignore the divider while using the keyboard.
see: options/helpers/options.js|
|children|node|false|null| |
| Prop | Type | required | default | Description |
| ---------------- | ------ | -------- | ------- | --------------------------------------------------------------------------------------------------- |
| a11yText | string | false | null | Descriptive a11y text for assistive technologies. By default, text from children node will be used. |
| filter | func | false | null | Filters the list |
| hasSearchIcon | bool | false | true | If true displays a search icon |
| noResultsMessage | string | false | null | Message displayed if no results are found |
| onChangeFilter | func | false | null | Callback to be executed when the value is changed |
| onKeyDown | func | false | null | Callback to be executed when a key is pressed |
| placeholder | string | false | null | Displays a placeholder |
| renderFilter | func | false | null | Render function for filter |
| value | string | false | null | Sets a value for filter |
| Prop | Type | required | default | Description |
| ----------------- | ----------------------------------------------------------------------------- | -------- | ------------------------- | ----------------------------------------------------------------------------------- |
| isAcceptVisible | bool | false | true | If true it makes the accept button visible |
| isCancelVisible | bool | false | true | If true it makes the cancel button visible |
| isClearVisible | bool | false | true | If true it makes the clear button visible |
| isDisabled | bool | false | false | If true it makes the footer disabled |
| kindAccept | [ Button.types.kind.PRIMARY, Button.types.kind.MINOR] | false | Button.types.kind.PRIMARY | Sets what kind the accept button will be |
| kindCancel | [ Button.types.kind.PRIMARY, Button.types.kind.MINOR] | false | Button.types.kind.MINOR | Sets what kind the cancel button will be |
| kindClear | [ Button.types.kind.PRIMARY, Button.types.kind.MINOR] | false | Button.types.kind.MINOR | Sets what kind the cancel button will be |
| labelAccept | string | false | null | Sets the label for the accept button |
| labelCancel | string | false | null | Sets the label for the cancel button |
| labelClear | string | false | null | Sets the label for the clear button |
| onClickAccept | func | false | null | Callback to be executed when the accept button is clicked or activated by keyboard. |
| onClickCancel | func | false | null | Callback to be executed when the cancel button is clicked or activated by keyboard. |
| onClickClear | func | false | null | Callback to be executed when the clear button is clicked or activated by keyboard. |
| renderExtraButton | func | false | () => {} | Render an extra button beside the clear button |
| size | [ Button.types.size.SMALL, Button.types.size.MEDIUM, Button.types.size.LARGE] | false | Button.types.size.MEDIUM | Determines the size of the footer |
| Prop | Type | required | default | Description |
| ---------------------- | ----------- | -------- | ---------- | -------------------------------------------------------------------------------------- |
| children | [node,func] | true | - | String, number or JSX content |
| isSelected | bool | false | null | |
| defaultIsSelected | bool | false | null | Describe if the option started as selected or not |
| hasNoIcon | bool | false | false | When no PlusIcon or CheckBox are needed |
| isDisabled | bool | false | false | Describe if the option is enable or not |
| isHidden | bool | false | false | Describe if the option is hidden or not |
| label | string | false | null | When the children are not a String, label should need to be add so the filter can work |
| onClick | func | false | null | Callback for the clicking event |
| value | any | false | null | Value of your option this can be any data structure |
| internalHandleOnClick | func | false | () => null | Internal prop, which shouldn't be documented |
| id | string | false | "" | Internal prop, which shouldn't be documented |
| preventDefaultOnSelect | bool | false | false | Internal prop, which shouldn't be documented |
| Prop | Type | required | default | Description |
| -------- | ------ | -------- | ------- | ------------------------------------- |
| children | node | false | - | Body content of the PopOver. |
| zIndex | number | false | 100 | Sets the z-index value of the PopOver |
| Prop | Type | required | default | Description |
| ---------------------- | ---- | -------- | ------- | ----------- |
| preventDefaultOnSelect | bool | false | true | |
| Prop | Type | required | default | Description |
| ------------------- | ----------- | -------- | ------- | ----------------------------------------------------------------------------------- |
| clearIcon | node | false | null | Custom clear icon |
| children | [node,func] | false | <> | Body content of the trigger. |
| hasClearButton | bool | false | true | If true it adds a clear button |
| hasImplicitAll | bool | false | false | Has implicit "All items selected" value when no item is selected |
| label | string | false | null | Override the label with a custom one. |
| onClickClear | func | false | null | Callback to be executed when the clear button is clicked or activated by keyboard. |
| onClickFooterAccept | func | false | null | Callback to be executed when the accept button is clicked or activated by keyboard. |
| placeholder | string | false | null | Sets a placeholder for the trigger |
| isHidden | bool | false | false | If true the trigger will be hidden |
For a basic ListBox
`js
import ListBox from "@paprika/list-box";
function Component() {
return (
);
}
`
With Filter
`js
import ListBox from "@paprika/list-box";
function Component() {
return (
);
}
``
- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG