Skip to content

Latest commit

 

History

History
61 lines (54 loc) · 1.4 KB

twelve-gifts-camp.md

File metadata and controls

61 lines (54 loc) · 1.4 KB
@crowdstrike/ember-toucan-core @crowdstrike/ember-toucan-form
patch
patch

Added a Combobox component to both core and form packages.

If you're using toucan-core, the control and field components are exposed:

<Form::Controls::Combobox
  @onChange={{this.onChange}}
  @options={{this.options}}
  @contentClass='z-10'
  @selected={{this.selected}}
  @optionKey='label'
  @noResultsText='No results'
  placeholder='Colors'
  as |combobox|
>
  <combobox.Option>
    {{combobox.option.label}}
  </combobox.Option>
</Form::Controls::Combobox>

<Form::Fields::Combobox
  @contentClass='z-10'
  @error={{this.errorMessage}}
  @hint='Type "blue" into the field'
  @label='Label'
  @noResultsText='No results'
  @onChange={{this.onChange}}
  @optionKey='label'
  @options={{this.options}}
  @selected={{this.selected}}
  placeholder='Colors'
  as |combobox|
>
  <combobox.Option>
    {{combobox.option.label}}
  </combobox.Option>
</Form::Fields::Combobox>

If you're using toucan-form, the component is exposed via:

<ToucanForm as |form|>
  <form.Combobox
    @label='Combobox'
    @name='combobox'
    @options={{options}}
    data-combobox
    as |combobox|
  >
    <combobox.Option data-option>{{combobox.option}}</combobox.Option>
  </form.Combobox>
</ToucanForm>

For more information on using these components, view the docs.