Select

Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.

Example

  • Select 1
<div class="form">
  <div class="field">
    <label for="input1" class="label">Email address</label>
    <select class="select" aria-label="Default select example" id="input1">
      <option selected disabled>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>
@use '~/styles/app.scss' as app;

$form: app.get-theme(app.$theme, 'components.form');

@include app.generate-component(
  $form,
  'form',
  app.$config,
  app.$theme
);

Multiple

  • Select 2
<div class="form">
  <div class="field">
    <label for="input1" class="label">Email address</label>
    <select class="select" aria-label="Default select example" id="input1" multiple>
      <option selected disabled>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>
@use '~/styles/app.scss' as app;

$form: app.get-theme(app.$theme, 'components.form');

@include app.generate-component(
  $form,
  'form',
  app.$config,
  app.$theme
);