NativeSelect

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { NativeSelect } from 'frontile';

const animals = ['Cheetah', 'Crocodile', 'Elephant'];

export default class NativeSelectUsage extends Component {
  @tracked selectedKey: string | null = 'Cheetah';

  onSelectionChange = (key: string | null) => {
    this.selectedKey = key;
  };

  <template>
    <NativeSelect
      @label='Favorite animal'
      @items={{animals}}
      @selectedKey={{this.selectedKey}}
      @onSelectionChange={{this.onSelectionChange}}
    />
    <p class='mt-4 text-sm text-neutral'>Selected: {{this.selectedKey}}</p>
  </template>
}

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { NativeSelect } from 'frontile';

const countries = [
  { code: 'br', country: 'Brazil' },
  { code: 'ca', country: 'Canada' },
  { code: 'jp', country: 'Japan' }
];

export default class NativeSelectItemBlock extends Component {
  @tracked selectedKey: string | null = null;

  onSelectionChange = (key: string | null) => {
    this.selectedKey = key;
  };

  <template>
    <NativeSelect
      @label='Country'
      @items={{countries}}
      @selectedKey={{this.selectedKey}}
      @onSelectionChange={{this.onSelectionChange}}
    >
      <:item as |o|>
        <o.Item @key={{o.item.code}}>{{o.item.country}}</o.Item>
      </:item>
    </NativeSelect>
    <p class='mt-4 text-sm text-neutral'>Selected: {{this.selectedKey}}</p>
  </template>
}

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { array } from '@ember/helper';
import { NativeSelect } from 'frontile';

export default class NativeSelectStaticItems extends Component {
  @tracked selectedKey: string | null = 'standard';

  onSelectionChange = (key: string | null) => {
    this.selectedKey = key;
  };

  <template>
    <NativeSelect
      @label='Shipping'
      @selectedKey={{this.selectedKey}}
      @disabledKeys={{(array 'overnight')}}
      @onSelectionChange={{this.onSelectionChange}}
      as |l|
    >
      <l.Item @key='standard'>Standard — 5 business days</l.Item>
      <l.Item @key='express'>Express — 2 business days</l.Item>
      <l.Item @key='overnight'>Overnight — unavailable</l.Item>
    </NativeSelect>
  </template>
}

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { NativeSelect } from 'frontile';

const roles = ['Owner', 'Editor', 'Viewer'];

export default class NativeSelectAllowEmpty extends Component {
  @tracked selectedKey: string | null = null;

  onSelectionChange = (key: string | null) => {
    this.selectedKey = key;
  };

  <template>
    <NativeSelect
      @label='Role'
      @items={{roles}}
      @allowEmpty={{true}}
      @placeholder='Select a role'
      @selectedKey={{this.selectedKey}}
      @onSelectionChange={{this.onSelectionChange}}
    />
    <p class='mt-4 text-sm text-neutral'>Selected:
      {{if this.selectedKey this.selectedKey 'none'}}</p>
  </template>
}

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { NativeSelect } from 'frontile';

const languages = ['Elixir', 'Go', 'Rust', 'TypeScript'];

export default class NativeSelectMultiple extends Component {
  @tracked selectedKeys: string[] = ['Rust'];

  onSelectionChange = (keys: string[]) => {
    this.selectedKeys = keys;
  };

  <template>
    <NativeSelect
      @label='Languages'
      @description='Hold Cmd or Ctrl to select more than one.'
      @selectionMode='multiple'
      @items={{languages}}
      @selectedKeys={{this.selectedKeys}}
      @onSelectionChange={{this.onSelectionChange}}
    />
  </template>
}

import { array, concat } from '@ember/helper';
import { NativeSelect } from 'frontile';

const plans = ['Basic', 'Pro'];

<template>
  <div class='flex flex-col gap-4'>
    {{#each (array 'sm' 'md' 'lg') as |size|}}
      <NativeSelect
        @label={{concat 'Plan (' size ')'}}
        @size={{size}}
        @items={{plans}}
      />
    {{/each}}
  </div>
</template>

import { array } from '@ember/helper';
import { NativeSelect } from 'frontile';

const environments = ['Development', 'Staging', 'Production'];

<template>
  <div class='flex flex-col gap-4'>
    <NativeSelect
      @label='Environment'
      @description='Where the build will be deployed.'
      @isRequired={{true}}
      @items={{environments}}
    />

    <NativeSelect
      @label='Environment'
      @errors={{(array 'Select an environment to continue.')}}
      @allowEmpty={{true}}
      @placeholder='Select an environment'
      @items={{environments}}
    />
  </div>
</template>

import { NativeSelect } from 'frontile';
import { SearchIcon } from 'site/components/icons';

const teams = ['Design', 'Engineering', 'Support'];

<template>
  <NativeSelect @label='Team' @items={{teams}}>
    <:startContent>
      <SearchIcon class='size-icon-md text-neutral' />
    </:startContent>
  </NativeSelect>
</template>