ComboBox Component

Usage
Component API

Usage

Velit mollit veniam occaecat nisi deserunt. Adipisicing officia consectetur pariatur eu do minim sint do minim. Esse officia sit sit excepteur esse. Aliqua quis excepteur exercitation amet esse proident eiusmod minim occaecat ipsum proident non. Ut mollit laborum mollit adipisicing aute Lorem. Labore mollit enim cupidatat nisi est.

Default ComboBox

<script>
  import { Form, ComboBox } from "$lib/components";
</script>

<Form on:submit>
  <ComboBox
    name="combobox"
    label="ComboBox"
    placeholder="Please select one item"
    items={[
      { id: "0", text: "Slack" },
      { id: "1", text: "Email" },
      { id: "2", text: "Fax" },
    ]}
  />
</Form>

With Selected ID

<script>
  import { Form, ComboBox } from "$lib/components";
</script>

<Form on:submit>
  <ComboBox
    name="combobox"
    label="ComboBox"
    placeholder="Please select one item"
    selectedId="1"
    items={[
      { id: "0", text: "Slack" },
      { id: "1", text: "Email" },
      { id: "2", text: "Fax" },
    ]}
  />
</Form>

With Description

<script>
  import { Form, ComboBox } from "$lib/components";
</script>

<Form on:submit>
  <ComboBox
    name="combobox"
    label="ComboBox"
    placeholder="Please select one item"
    description="Tell me how I can contact you"
    items={[
      { id: "0", text: "Slack" },
      { id: "1", text: "Email" },
      { id: "2", text: "Fax" },
    ]}
  />
</Form>

Disabled Items

<script>
  import { Form, ComboBox } from "$lib/components";
</script>

<Form on:submit>
  <ComboBox
    name="combobox"
    label="ComboBox"
    placeholder="Please select one item"
    description="Tell me how I can contact you"
    items={[
      { id: "0", text: "Slack" },
      { id: "1", text: "Email" },
      { id: "2", text: "Fax", disabled: true },
    ]}
  />
</Form>

Direction

<script>
  import { Form, ComboBox } from "$lib/components";
</script>

<Form on:submit>
  <ComboBox
    name="combobox"
    label="ComboBox"
    placeholder="Please select one item"
    description="Tell me how I can contact you"
    direction="top"
    items={[
      { id: "0", text: "Slack" },
      { id: "1", text: "Email" },
      { id: "2", text: "Fax", disabled: true },
    ]}
  />
</Form>

Required State

<script>
  import { Form, ComboBox } from "$lib/components";
</script>

<Form on:submit>
  <ComboBox
    required
    name="combobox"
    label="ComboBox"
    placeholder="Please select one item"
    description="Tell me how I can contact you"
    items={[
      { id: "0", text: "Slack" },
      { id: "1", text: "Email" },
      { id: "2", text: "Fax", disabled: true },
    ]}
  />
</Form>

Disabled State

<script>
  import { Form, ComboBox } from "$lib/components";
</script>

<Form on:submit>
  <ComboBox
    disabled
    name="combobox"
    label="ComboBox"
    placeholder="Please select one item"
    description="Tell me how I can contact you"
    items={[
      { id: "0", text: "Slack" },
      { id: "1", text: "Email" },
      { id: "2", text: "Fax", disabled: true },
    ]}
  />
</Form>

Warning State

<script>
  import { Form, ComboBox } from "$lib/components";
</script>

<Form on:submit>
  <ComboBox
    warning
    warningText="You'll be warned!"
    name="combobox"
    label="ComboBox"
    placeholder="Please select one item"
    description="Tell me how I can contact you"
    items={[
      { id: "0", text: "Slack" },
      { id: "1", text: "Email" },
      { id: "2", text: "Fax", disabled: true },
    ]}
  />
</Form>

Invalid State

<script>
  import { Form, ComboBox } from "$lib/components";
</script>

<Form on:submit>
  <ComboBox
    invalid
    invalidText="This field is invalid"
    name="combobox"
    label="ComboBox"
    placeholder="Please select one item"
    description="Tell me how I can contact you"
    items={[
      { id: "0", text: "Slack" },
      { id: "1", text: "Email" },
      { id: "2", text: "Fax", disabled: true },
    ]}
  />
</Form>