Doggo Storybook 0.10.4-34-g3a480e9

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"
/>