Skip to content

Latest commit

 

History

History
78 lines (57 loc) · 2.21 KB

Dropdown.mdx

File metadata and controls

78 lines (57 loc) · 2.21 KB
Raw

import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs'; import { WithObjectOptions } from './Dropdown.stories';

Dropdown

Dropdown is a stylized, accessible component that mimics the behavior of a native HTML <select>.

How to Use

To use the dropdown component, you must provide a v-model, an id, a label, and an array of options.

The dropdown will accept options as an array of string or objects. If you use objects, they must have at least the label property and optionally the disabled property. When an option is selected, the dropdown will emit an input event with the selected option (the full string or object).

You can optionally provide a placeholder which will display in the select when a selection has not been made and will appear as a list header above the options.

Like other input types, you can provide boolean props for required, disabled, error, and success.

You can customize the height of the dropdown list with the listHeight prop that will set a fixed height on the dropdown list, and any overflow will be scrollable. The height passed in should include the units (i.e. '5rem', '5px').

Example of using this component in a template with simple string options

const options = ['Ginny', 'Prudence', 'Brie', 'Jenny'];
const modelValue = '';
<dropdown
  id="pet"
  v-model="modelValue"
  id="pet"
  label="Pet"
  :options="options"
  placeholder="Pick a pet"
/>

Example of the emitted event data

'Ginny';

Example of using this component in a template with object options (for more complex use cases and to set disabled options). Note: only label is used in the component but the emitted event will include the entire option object

const options = [
  { label: 'Ginny', value: 'Beth' },
  { label: 'Prudence', value: 'Mercedes' },
  { label: 'Brie', value: 'Nina' },
  { label: 'Jenny', value: 'Mercedes', disabled: true }
];
const modelValue = '';
<dropdown
  id="pet"
  v-model="modelValue"
  id="pet"
  label="Pet"
  :options="options"
  placeholder="Pick a pet"
/>

Example of the emitted event data

{ label: 'Ginny', value: 'Beth' }

Props