Doggo Storybook 0.10.4-58-gbc96e61

Combobox

Renders a text input with a popup that allows users to select a value from a list of suggestions.

Read more Read less

Usage

With simple values:

<.combobox
  id="dog-breed-selector"
  name="breed"
  list_label="Dog breeds"
  options={[
    "Labrador Retriever",
    "German Shepherd",
    "Golden Retriever",
    "French Bulldog",
    "Bulldog"
  ]}
/>

With label/value pairs:

<.combobox
  id="dog-breed-selector"
  name="breed"
  list_label="Dog breeds"
  options={[
    {"Labrador Retriever", "labrador"},
    {"German Shepherd", "german_shepherd"},
    {"Golden Retriever", "golden_retriever"},
    {"French Bulldog", "french_bulldog"},
    {"Bulldog", "bulldog"}
  ]}
/>

With label/value/description tuples:

<.combobox
  id="dog-breed-selector"
  name="breed"
  list_label="Dog breeds"
  options={[
    {"Labrador Retriever", "labrador", "Friendly and outgoing"},
    {"German Shepherd", "german_shepherd", "Confident and smart"},
    {"Golden Retriever", "golden_retriever", "Intelligent and friendly"},
    {"French Bulldog", "french_bulldog", "Adaptable and playful"},
    {"Bulldog", "bulldog", "Docile and willful"}
  ]}
/>
Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
Required id * :string

Sets the DOM ID for the input.
Required list_label * :string

Sets the aria label for the list box. For example, if the combobox allows

 Read more Read less

the user to select a country, the list label could be "Countries". The value should start with an uppercase letter and be localized.
Required name * :string

Sets the name for the text input.
Required options * :list

A list of available options.

 Read more Read less
  • If a list of primitive values is passed, each item serves as both the label and the input value.
  • If a list of 2-tuples is passed, the first tuple element serves as label and the second element serves as input value.
  • If a list of 3-tuples is passed, the third tuple element serves as an additional description.
rest :global

Any additional HTML attributes.
value :string

The current input value. The display value for the text input is derived

 Read more Read less

by finding the given value in the list of options.