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"}
  ]}
/>
Only values Open in playground 
<.combobox id="combobox-single-only-values" name="breed" value="Golden Retriever" options={["Labrador Retriever", "German Shepherd", "Golden Retriever", "French Bulldog", "Bulldog"]} list_label="Dog breeds"/>
With labels Open in playground 
<.combobox id="combobox-single-with-labels" name="breed" value="french_bulldog" options={[{"Labrador Retriever", "labrador"}, {"German Shepherd", "german_shepherd"}, {"Golden Retriever", "golden_retriever"}, {"French Bulldog", "french_bulldog"}, {"Bulldog", "bulldog"}]} list_label="Dog breeds"/>
With labels and descriptions Open in playground 
<.combobox id="combobox-single-with-labels-and-descriptions" name="breed" value="labrador" 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"}]} list_label="Dog breeds"/>