@workday/canvas-kit-labs-react-combobox NPM

Canvas Kit Combobox

For a full suite of examples, have a look at the Combobox Stories.

Installation

yarn add @workday/canvas-kit-labs-react-combobox

Accessibility

This module uses the ARIA 1.0 Combobox spec. The newer ARIA 1.1 spec does not have full browser/screenreader support yet.

See here for differences between ARIA 1.0 and 1.1

Usage

import {SearchBar} from '@workday/canvas-kit-labs-react-header';
import {MenuItem} from '@workday/canvas-kit-labs-react-menu';
import {TextInput} from '@workday/canvas-kit-labs-react-text-input';
import {FormField} from '@workday/canvas-kit-labs-react-form-field';

const autocompleteCallback = event => console.log('Adjust menu items here')


<FormField id='id-123' label='Example'>
  <Combobox
    autocompleteItems={[<MenuItem>Item 1</MenuItem>]}
    onChange={autocompleteCallback}
    onFocus={action(`Focus`)}
    onBlur={action(`Blur`)}
  />
    <TextInput placeholder="Autocomplete" autoFocus={true} />
  </Combobox>
</FormField>

Static Properties

None

Component Props

Required

`children: React.ReactElement<TextInputProps>`

The TextInput component to wrap.

Optional

`initialValue: string`

Initial value to set the input to.

`showClearButton: boolean`

Show button to clear input field.

`clearButtonVariant: IconButtonVariant`

The type of icon button to use for clearing input.

Default: IconButton.Variant.Plain

`clearButtonLabel: string`

Screenreader Label for the clear button.

Default: 'Reset Search Input'

`autocompleteItems: React.ReactElement<MenuItemProps>[]`

An array of MenuItems to show under the input.

`onChange: React.ChangeEventHandler<HTMLInputElement>`

Callback to listen when the TextInput changes. This is usually used to update the autocomplete items.

`onFocus: React.FocusEventHandler`

Callback to listen when the TextInput focuses.

`onBlur: React.FocusEventHandler`

Callback to listen when the TextInput blurs.

canvas canvas-kit react components workday combobox

@emotion/core @emotion/styled @workday/canvas-kit-labs-react-menu @workday/canvas-kit-react-button @workday/canvas-kit-react-card @workday/canvas-kit-react-common @workday/canvas-kit-react-core @workday/canvas-kit-react-text-input @workday/canvas-system-icons-web lodash.flatten uuid

@infinitebrahmanuniverse/nolb-_wor @everything-registry/sub-chunk-1021 @workday/canvas-kit-labs-react-header

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4.0.0-prerelease.f29f26b.3

4 years ago

4.0.0-beta.4

4 years ago

4.0.0-prerelease.25ebd14.2

4 years ago

4.0.0-prerelease.370c732.1

4 years ago

4.0.0-prerelease.9bee8d0.0

4 years ago

3.7.1-next.2

4 years ago

3.7.1-next.0

4 years ago

4.0.0-prerelease.2df320f.3

4 years ago

4.0.0-beta.3

4 years ago

4.0.0-prerelease.42c1aef.2

4 years ago

4.0.0-prerelease.bf33fae.0

4 years ago

4.0.0-prerelease.839d919.25

4 years ago

4.0.0-prerelease.0ec7791.1

4 years ago

4.0.0-beta.2

4 years ago

4.0.0-prerelease.0c47b9c.26

4 years ago

4.0.0-prerelease.22c6ff1.24

4 years ago

4.0.0-prerelease.9daf370.23

4 years ago

4.0.0-prerelease.e668828.22

4 years ago

4.0.0-prerelease.da2d967.21

4 years ago

4.0.0-prerelease.5f48600.20

4 years ago

3.6.1-next.14

4 years ago

3.7.0

4 years ago

4.0.0-prerelease.baf5748.18

4 years ago

4.0.0-prerelease.c1d3fa5.19

4 years ago

4.0.0-prerelease.ba8e51e.17

4 years ago

3.6.1-next.13

4 years ago

4.0.0-prerelease.f1e1a93.16

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago