Doggo Storybook 0.9.0

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. 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 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. - 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 by finding the given value in the list of options.