```js
const items = ipsum.list((i) => ({
  value: i,
  label: ipsum.name(),
  disabled: i > 4 && !Math.floor(Math.random() * 3),
}));
const [value, setValue] = React.useState('');
<SilkeBox column gap="xs">
  {['default', 'zombie', 'ghost'].map((kind) => (
    <SilkeBox gap="m" vAlign="center">
      <SilkeSelectField
        key={kind}
        label="Default"
        name="Foobar"
        placeholder="Select an item"
        kind={kind}
        onChange={setValue}
        value={value}
        items={items}
      />
      <SilkeSelectField
        key={kind}
        label="Default"
        name="Foobar"
        placeholder="Select an item"
        kind={kind}
        size="s"
        onChange={setValue}
        value={value}
        items={items}
      />
      <SilkeSelectField
        key={kind}
        label="Default"
        name="Foobar"
        placeholder="Select an item"
        kind={kind}
        size="s"
        onChange={setValue}
        value={value}
        items={items}
      />
      <SilkeSelectField
        key={kind}
        label="Default"
        name="Foobar"
        disabled
        placeholder="Select an item"
        kind={kind}
        size="s"
        onChange={setValue}
        value={value}
        items={items}
      />
    </SilkeBox>
  ))}
</SilkeBox>;
```

### Select with icon

```js
const items = ipsum.list((i) => ({
  value: i,
  label: ipsum.name(),
  icon: 'react',
  disabled: i > 4 && !Math.floor(Math.random() * 3),
}));
const [value, setValue] = React.useState('');
<SilkeBox column gap="xs">
  {['default', 'zombie', 'ghost'].map((kind) => (
    <SilkeBox gap="m" vAlign="center">
      <SilkeSelectField
        key={kind}
        label="Default"
        name="Foobar"
        placeholder="Select an item"
        kind={kind}
        onChange={setValue}
        value={value}
        items={items}
      />
      <SilkeSelectField
        key={kind}
        label="Default"
        name="Foobar"
        placeholder="Select an item"
        kind={kind}
        size="s"
        onChange={setValue}
        value={value}
        items={items}
      />
      <SilkeSelectField
        key={kind}
        label="Default"
        name="Foobar"
        placeholder="Select an item"
        kind={kind}
        size="s"
        onChange={setValue}
        value={value}
        items={items}
      />
    </SilkeBox>
  ))}
</SilkeBox>;
```

### Select with image

```js
const items = ipsum.list((i) => ({
  value: i,
  label: ipsum.name(),
  image: ipsum.image(),
  disabled: i > 4 && !Math.floor(Math.random() * 3),
}));
const [value, setValue] = React.useState('');
<SilkeBox column gap="xs">
  {['default', 'zombie', 'ghost'].map((kind) => (
    <SilkeBox gap="m" vAlign="center">
      <SilkeSelectField
        key={kind}
        label="Default"
        name="Foobar"
        placeholder="Select an item"
        kind={kind}
        onChange={setValue}
        value={value}
        items={items}
      />
      <SilkeSelectField
        key={kind}
        label="Default"
        name="Foobar"
        placeholder="Select an item"
        kind={kind}
        size="s"
        onChange={setValue}
        value={value}
        items={items}
      />
      <SilkeSelectField
        key={kind}
        label="Default"
        name="Foobar"
        placeholder="Select an item"
        kind={kind}
        size="s"
        onChange={setValue}
        value={value}
        items={items}
      />
    </SilkeBox>
  ))}
</SilkeBox>;
```

### Custom dropdown item render

```js
const items = ipsum.list((i) => ({ value: i, label: ipsum.name() }));
const [value, setValue] = React.useState('');

<SilkeSelectField
  label="Default"
  name="Foobar"
  onChange={setValue}
  value={value}
  items={items}
  renderItem={({ item, selected }) => (
    <SilkeBox
      bg={selected ? 'error' : null}
      bgHover="highlight"
      height="base"
      gap="m"
      vAlign="center"
      hPad="l"
      flex
    >
      <span>{item.value}</span>
      <span>{item.label}</span>
    </SilkeBox>
  )}
/>;
```

## Select multiple

```js
const items = ipsum.list((i) => ({ value: i, label: ipsum.name() }));
const [value, setValue] = React.useState([]);

<SilkeSelectField
  label="Default"
  name="Foobar"
  multiple
  onChange={setValue}
  value={value}
  items={items}
/>;
```

### Select multiple with custom tag render

```js
const items = ipsum.list((i) => ({ value: i, label: ipsum.name() }));
const [value, setValue] = React.useState([items[0].value]);

<SilkeSelectField
  label="Default"
  name="Foobar"
  multiple
  onChange={setValue}
  value={value}
  items={items}
  placeholder={!value.length && 'No items selected'}
  renderTags={({ items }) => `Found ${items.length} items`}
/>;
```

## Native Popover Version

The native version uses the browser's native Popover API for better performance and accessibility.

```js
const items = ipsum.list((i) => ({
  value: i,
  label: ipsum.name(),
  disabled: i > 4 && !Math.floor(Math.random() * 3),
}));
const [value, setValue] = React.useState('');
<SilkeBox column gap="xs">
  {['default', 'zombie', 'ghost'].map((kind) => (
    <SilkeBox gap="m" vAlign="center">
      <SilkeSelectFieldNative
        key={kind}
        label="Native Popover"
        name="Foobar"
        placeholder="Select an item"
        kind={kind}
        onChange={setValue}
        value={value}
        items={items}
      />
    </SilkeBox>
  ))}
</SilkeBox>;
```

### Native Select with icon

```js
const items = ipsum.list((i) => ({
  value: i,
  label: ipsum.name(),
  icon: 'react',
}));
const [value, setValue] = React.useState('');

<SilkeSelectFieldNative
  label="Native Select"
  name="Foobar"
  placeholder="Select an item"
  onChange={setValue}
  value={value}
  items={items}
/>;
```

### Native Select multiple

```js
const items = ipsum.list((i) => ({ value: i, label: ipsum.name() }));
const [value, setValue] = React.useState([]);

<SilkeSelectFieldNative
  label="Native Multiple"
  name="Foobar"
  multiple
  onChange={setValue}
  value={value}
  items={items}
/>;
```