2.0.0 • Published 1 month ago
@zendeskgarden/container-combobox v2.0.0
@zendeskgarden/container-combobox
This package includes containers relating to Combobox in the Garden Design System.
Installation
npm install @zendeskgarden/container-combobox
Features
The combobox container encapsulates complexity while supporting a wide variety of standard features. Core logic and events are backed by Downshift. Standard naming and behaviors are finessed to suit Garden's point of view.
- single and multiple option selection
- non-editable select-only (similar to a native HTML
<select>
) - autocomplete (on by default) with user-provided option filtering
- support for trigger as input parent (Garden layout) vs. trigger as input sibling (Downshift layout)
Usage
Check out storybook for live examples.
useCombobox
import { useCombobox } from '@zendeskgarden/container-combobox';
const Combobox = () => {
const triggerRef = createRef();
const inputRef = createRef();
const listboxRef = createRef();
const options = [
{ value: 'value-1', label: 'One' },
{ value: 'value-2', label: 'Two' },
{ value: 'value-3', label: 'Three' }
];
const {
getLabelProps,
getInputProps,
getTriggerProps,
getListboxProps,
getOptionProps,
isExpanded
} = useCombobox({
triggerRef,
inputRef,
listboxRef,
options
});
return (
<>
<label {...getLabelProps()}>Label</label>
<input {...getInputProps()} />
<button {...getTriggerProps()}>▼</button>
<ul
{...getListboxProps({ 'aria-label': 'Options' })}
style={{ visibility: isExpanded ? 'visible' : 'hidden' }}
>
{options.map((option, index) => (
<li key={index} {...getOptionProps({ option })}>
{option.label}
</li>
))}
</ul>
</>
);
};
ComboboxContainer
import { ComboboxContainer } from '@zendeskgarden/container-combobox';
const Combobox = () => {
const triggerRef = createRef();
const inputRef = createRef();
const listboxRef = createRef();
const options = [
{ value: 'value-1', label: 'One' },
{ value: 'value-2', label: 'Two' },
{ value: 'value-3', label: 'Three' }
];
return (
<ComboboxContainer
triggerRef={triggerRef}
inputRef={inputRef}
listboxRef={listboxRef}
options={options}
>
{({
getLabelProps,
getInputProps,
getTriggerProps,
getListboxProps,
getOptionProps,
isExpanded
}) => (
<>
<label {...getLabelProps()}>Label</label>
<input {...getInputProps()} />
<button {...getTriggerProps()}>▼</button>
<ul
{...getListboxProps({ 'aria-label': 'Options' })}
style={{ visibility: isExpanded ? 'visible' : 'hidden' }}
>
{options.map((option, index) => (
<li key={index} {...getOptionProps({ option })}>
{option.label}
</li>
))}
</ul>
</>
)}
</ComboboxContainer>
);
};
2.0.0
1 month ago
1.1.4
2 months ago
1.1.3
3 months ago
1.1.1
3 months ago
1.1.2
3 months ago
1.1.0
3 months ago
1.0.2
10 months ago
1.0.1
10 months ago
1.0.9
8 months ago
1.0.8
8 months ago
1.0.7
8 months ago
1.0.6
9 months ago
1.0.5
9 months ago
1.0.4
10 months ago
1.0.3
10 months ago
1.0.11
8 months ago
1.0.10
8 months ago
1.0.13
7 months ago
1.0.12
7 months ago
1.0.0
11 months ago
0.3.2
12 months ago
0.3.1
12 months ago
0.3.4
11 months ago
0.3.3
11 months ago
0.3.0
1 year ago
0.2.0
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago