Select

<script>
  import {Select, Field} from 'svelma'
  let users = ["John", "Conner", "Randy"]
  
</script>

<Field label="Simple">
  <Select placeholder="Select a name">
    {#each users as user}
      <option value={user}>{user}</option>
    {/each}
  </Select>
</Field>

<Field label="Error" type='is-danger' message="Something went wrong with this field">
  <Select placeholder="Select a name">
    {#each users as user}
      <option value={user}>{user}</option>
    {/each}
  </Select>
</Field>


<Field label="Rounded">
  <Select placeholder="Select a name" rounded>
    {#each users as user}
      <option value={user}>{user}</option>
    {/each}
  </Select>
</Field>

<Field label="Required">
  <Select placeholder="Select a name" required>
    {#each users as user}
      <option value={user}>{user}</option>
    {/each}
  </Select>
</Field>


<Field label="Loading">
  <Select placeholder="Select a name" loading>
    {#each users as user}
      <option value={user}>{user}</option>
    {/each}
  </Select>
</Field>

<Field label="Disabled">
  <Select placeholder="Select a name" disabled>
    {#each users as user}
      <option value={user}>{user}</option>
    {/each}
  </Select>
</Field>


<Field label="Expanded">
  <Select placeholder="Select a name" expanded>
    {#each users as user}
      <option value={user}>{user}</option>
    {/each}
  </Select>
</Field>

<script>
  import {Select, Field} from 'svelma'

  let selectedOptions = [];
</script>

<p class="content"><b>selected</b>: [{selectedOptions}]</p>
<Field>
  <Select multiple nativeSize = "8" bind:selected={selectedOptions}>
    <option value="flint">Flint</option>
    <option value="silver">Silver</option>
    <option value="vane">Vane</option>
    <option value="billy">Billy</option>
    <option value="jack">Jack</option>
    <option value="heisenberg">Heisenberg</option>
    <option value="jesse">Jesse</option>
    <option value="saul">Saul</option>
    <option value="mike">Mike</option>
  </Select>
</Field>

<script>
  import {Select, Field} from 'svelma'
  
</script>

<Field>
  <Select placeholder="Country" icon="globe" iconPack='fas'>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </Select>
</Field>

<Field>
  <Select placeholder="Client" icon="user" iconPack='fas'>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </Select>
</Field>

<script>
  import {Select, Field} from 'svelma'
  
</script>

<Field>
  <Select placeholder="Small" size="is-small" expanded>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </Select>
</Field>

<Field>
  <Select placeholder="Default" expanded>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </Select>
</Field>

<Field>
  <Select placeholder="Medium" size="is-medium" expanded>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </Select>
</Field>

<Field>
  <Select placeholder="Large" size="is-large" expanded>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </Select>
</Field>