@justeattakeaway/pie-select NPM

@justeattakeaway/pie-select

Source Code | Design Documentation | NPM

@justeattakeaway/pie-select is a Web Component built using the Lit library. It offers a simple and accessible interactive select input component for web applications.

Installation
Documentation
Usage Examples
Questions and Support
Contributing

Installation

To install any of our web components in your application, we would suggest following the getting started guide to set up your project.

Ideally, you should install the component using the @justeattakeaway/pie-webc package, which includes all of the components. Or you can install the individual component package.

Documentation

Properties

Prop	Options	Description	Default
`size`	`"small"`, `"medium"`, `"large"`	The size of the select component.	`medium`
`disabled`	`boolean`	Whether the select is disabled.	`false`
`assistiveText`	`string`	An optional assistive text to display below the select element. Must be provided when the status is `error`.	`undefined`
`status`	`"default"`, `"error"`	The status of the select component / assistive text.	`default`
`name`	`string`	The name of the select (used as a key/value pair with `value`). This is required in order to work properly with forms.	`undefined`
`options`	`array`	The options to display in the select. Can be an array of option objects or option group objects. See Using the options prop for more details.	`[]`

Using the options prop

The options prop accepts an array of option objects or option group objects:

Option objects

Prop	Options	Description	Default
`tag`	`"option"`	Must be `option` to identify this as an option.	`undefined`
`text`	`string`	The text to display for the option.	`undefined`
`value`	`string`	The value for the option.	`undefined`
`disabled`	`boolean`	Whether the option is disabled.	`false`
`selected`	`boolean`	Whether the option is selected by default.	`false`

Option group objects

Prop	Options	Description	Default
`tag`	`"optgroup"`	Must be `optgroup` to identify this as an option group.	`undefined`
`label`	`string`	The label for the group.	`undefined`
`disabled`	`boolean`	Whether the entire group is disabled.	`false`
`options`	`array`	Array of option objects within this group.	`[]`

Slots

Slot	Description
`leadingIcon`	An icon to display at the start of the select.

CSS Variables

This component does not expose any CSS variables for style overrides.

Events

Event	Description
`change`	Fires when the selected option is changed.

Usage Examples

When using icons, we recommend using @justeattakeaway/pie-icons-webc to ensure consistency with the rest of the design system.

For HTML:

// import as module into a js file that will be loaded on the page where the component is used.
import '@justeattakeaway/pie-webc/components/select.js';
import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';

<pie-select
    name="my-select"
    options="[
      { tag: 'option', text: 'Select an option' },
      { tag: 'option', text: 'Option 1', value: 'option1' }
    ]">
  <icon-placeholder slot="leadingIcon"></icon-placeholder>
</pie-select>

For Native JS Applications, Vue, Angular, Svelte, etc.:

// Vue templates (using Nuxt 3)
import '@justeattakeaway/pie-webc/components/select.js';
import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';

<pie-select
    name="my-select"
    :options="[
      { tag: 'option', text: 'Select an option' },
      { tag: 'option', text: 'Option 1', value: 'option1' }
    ]">
<icon-placeholder slot="leadingIcon"></icon-placeholder>
</pie-select>

For React Applications:

import { PieSelect } from '@justeattakeaway/pie-webc/react/select.js';
import { IconPlaceholder } from '@justeattakeaway/pie-icons-webc/dist/react/IconPlaceholder.js';

<PieSelect
    name="my-select"
    options={[
      { tag: 'option', text: 'Select an option' },
      { tag: 'option', text: 'Option 1', value: 'option1' }
    ]}>
  <IconPlaceholder slot="leadingIcon"></IconPlaceholder>
</PieSelect>