Select

Select creates better-styled select boxes that uses a browser’s native <select> element.

An easy way to make select boxes

You just need a name, a label, and a list of items.

<Select
  name="fav-fruit"
  label="Pick your favourite fruit:"
  items={['apple', 'banana', 'carrot']}
/>

It doesn’t get any easier than this! 😉

Pick your favourite fruit:

Add custom labels easily

If you want to use custom labels, just pass an array of objects into items.

<Select
  name="fav-fruit"
  label="Pick your favourite fruit:"
  items={[
    { value: 'apple', label: '🍎 Apple' },
    { value: 'banana', label: '🍌 Banana' },
    { value: 'carrot', label: '🥕 Carrot' }
  ]}
/>

Pick your favourite fruit:

Create native multi-selects

Add multiple to get a native multi-select element. These can be styled with CSS to a certain extent. (Just not in Safari).

<Select
  multiple
  name="fav-fruit"
  label="Pick your favourite fruits:"
  items={['apple', 'banana', 'carrot', 'pear']}
/>

Pick your favourite fruits:

Preselect any item

Just set selected to the value of the item you want to preselect. This works for both single and multi selects!

<!-- Single Select -->
<Select
  ...
  items={[
    { value: 'apple' },
    { value: 'banana', selected: true },
    { value: 'carrot' },
    { value: 'pear' },
  ]}
/>

<!-- Multi Select -->
<Select
  ...
  multiple
  items={[
    { value: 'apple' },
    { value: 'banana', selected: true },
    { value: 'carrot', selected: true },
    { value: 'pear' },
  ]}
/>

Single Select

Multi Select

Readonly works too

Like all Checkboxes and Radios, we’ve added a readonly feature to Select that lets you disable and values to the server without allowing users to change them.

<!-- Single Select -->
<Select
  ...
  items={[
    { value: 'apple' },
    { value: 'banana', selected: true },
    { value: 'carrot' },
  ]}
  readonly
/>

<!-- Multi Select -->
<Select
  ...
  multiple
  items={[
    { value: 'apple' },
    { value: 'banana', selected: true },
    { value: 'carrot', selected: true },
    { value: 'pear' },
  ]}
  readonly
/>

Single Select

Multi Select

Readonly doesn’t exist as a HTML 5 property. We made it possible by as many hidden inputs as necessary.

Easy styling

Native <select> and <option> elements are quite difficlt to style by default. We made it easier for you with a couple of CSS variables.

That said, styling options are still quite limited since not all browsers respect styles given to <option>.

This is editable. Give it a try

Select

Multi Select

Single Select

Select creates a native select component that lets you select a single item.

<Select
  name="fav-fruit"
  label="Pick your favourite fruit:"
  items={[
    { value: 'apple', label: '🍎 Apple' },
    { value: 'banana', label: '🍌 Banana' },
    { value: 'carrot', label: '🥕 Carrot' }
  ]}
/>

Optional item labels

Each select item (or option, as they call it), needs to have a value.

The label is optional. If you don’t provide a label, Select will create labels for each item by converting value to Title Case.

<Select
  name="fav-fruit"
  legend="Pick your favourite fruit:"
  items={[
    { value: 'apple' },
    { value: 'banana' },
    { value: 'carrot' },
  ]}
/>

For convenience, you can also pass an array of strings to Select.

<Select
  name="fav-fruit"
  label="Pick your favourite fruit:"
  items={[ 'apple', 'banana', 'carrot' ]}
/>

Preselect an item

You can preselect any item by adding selected to the respective item.

<Select
  name="fav-fruit"
  legend="Pick your favourite fruit:"
  items={[
    { value: 'apple' },
    { value: 'banana', selected: true },
    { value: 'carrot' },
  ]}
/>

Another way to preselect an item is to set the item’s value as selected.

<Select
  name="fav-fruit"
  legend="Pick your favourite fruit:"
  items={[ 'apple', 'banana', 'carrot' ]}
  selected="banana"
/>

Disabled

The Select component can be disabled by setting the disabled property. When disabled, Select will not send data when the form is submitted. Use readonly if you still want data to be sent.

<Select ... disabled />

You can disable each option by setting disabled to true.

<Select
  ...
  items={[
    { value: 'apple', disabled: true },
    { value: 'banana' },
    { value: 'carrot' },
  ]}
/>

Readonly

You can make the Select component readonly by setting the readonly property. When readonly, Select will send data when the form is submitted, but the user will not be able to change the value.

<Select ...
  items={[
    { value: 'apple' },
    { value: 'banana', selected: true },
    { value: 'carrot' },
  ]}
  readonly
/>

Note

The native <select> element does not contain a readonly attribute. We made it possible by adding a hidden input with the same name as the select element, and with the same value as the selected option.

Individual options cannot be set to readonly.

Changing the icon

You can change the select icon by setting icon. Please see SVG for more information on how to use icons.

<Select ... icon="ph:caret-up-down" />

Other properties

All other properties passed to Select will be added to the <select> element. All other properties created for each item will be passed directly to their respective <option> elements.

Multi Select

Use the native multiple attribute to create a multi-select component.

<Select
  multiple
  name="fav-fruit"
  label="Pick your favourite fruits:"
  items={[
    { value: 'apple', label: '🍎 Apple' },
    { value: 'banana', label: '🍌 Banana' },
    { value: 'carrot', label: '🥕 Carrot' }
    { value: 'pear', label: '🍐 Pear' },
  ]}
/>

Size

Almost every browser shows 4 items in a multi-select by default. You can change this by setting the size property.

<Select ... multiple size="3" />

Preselect items

You can preselect items by selected to true to the respective item.

<Select
  ...
  multiple
  items={[
    { value: 'apple' },
    { value: 'banana', selected: true },
    { value: 'carrot', selected: true },
    { value: 'pear' },
  ]}
/>

Another way to preselect an item is to set the item’s value as selected.

<Select
  ...
  multiple
  items={[ 'apple', 'banana', 'carrot', 'pear' ]}
  selected={["banana", "carrot"]}
/>

Disabled

Use disabled to disable the Select component. When disabled, Select will not send data when the form is submitted. Use readonly if you still want data to be sent.

<Select ... multiple disabled />

You choose to disable individual options by setting their disabled property to true.

<Select
  ...
  multiple
  items={[
    { value: 'apple' },
    { value: 'banana', disabled: true },
    { value: 'carrot', disabled: true },
    { value: 'pear' },
  ]}
/>

Readonly

Use readonly to make the Select component readonly. When readonly, Select will send data when the form is submitted, but the user will not be able to change the value.

<Select
  ...
  multiple
  readonly
  items={[
    { value: 'apple' },
    { value: 'banana', selected: true },
    { value: 'carrot', selected: true },
    { value: 'pear' },
  ]}
/>

Bindings and Events

Note

The contents of this section will only work in a .svelte file and not inside an .astro file.

Element Binding

You can bind to the <select> element with the ref property.

<script>
  let ref = null
</script>

<Select ... bind:ref>

Selected value binding

You can bind to the selected property to get the selected value.

If you’re using multiple, selected should be an array instead of a string value.

<script>
  let selected = null
  let multiSelected = []
</script>

<Select ... bind:selected/>
<Select ... multiple bind:selected={multiSelected}/>

Single Select

Data

{
  selected: null
}

Multiple Select

Data

{
  selected: [

  ]
}

Events

Only the change event is supported on Select. You can listen to the event like this:

<script>
  function change(event) {
    console.log(event.target.value)
  }
</script>

<Select ... on:change={change} />

Note

We only support the change event because Svelte 4 doesn’t have automatic event-forwarding capability. All events will be forwarded automatically when we migrate to Svelte 5.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Basic Styles

Select uses styles from both Splendid Styles and Splendid Layouts. The easiest way to include all basic styles is to import all styles from both libraries:

@use '@splendidlabz/layouts';
@use '@splendidlabz/styles';

@import '@splendidlabz/layouts/css';
@import '@splendidlabz/styles/css';

Only necessary styles

If you wish to include only the necessary styles in your project, you can import the following files:

@use '@splendidlabz/styles/Forms/FormBase';
@use '@splendidlabz/styles/Forms/Select';
@use '@splendidlabz/layouts/Layouts/Micro/Stack';
@use '@splendidlabz/layouts/Layouts/Position/Pos';

@import '@splendidlabz/styles/css/Forms/FormBase';
@import '@splendidlabz/styles/css/Forms/Select';
@import '@splendidlabz/layouts/css/Layouts/Micro/Stack';
@import '@splendidlabz/layouts/css/Layouts/Position/Pos';

HTML Output

Single Select

Select produces the following HTML:

<div class="TextField Select">
  <label class="Label" for="select">Label</label>
  <div class="InputGroup Stack items-center">
    <select id="select" ...>
      <option value="one">Option 1 label</option>
      <option value="two">Option 2 label</option>
      <option value="three">Option 3 label</option>
    </select>

    <div class="Pos-right">
      <svg width="24" height="24" viewBox="0 0 24 24">...</svg>
    </div>
  </div>
</div>

TextField and InputGroup are used by most text-related components to mantain a consistent style.
Stack and Pos-right (from Splendid Layouts) are used to place the SVG on the right of the component.

Multi select

When multiple is used, Select produces a similar HTML, but without Stack and Pos-right.

<div class="TextField Select">
  <label class="Label" for="select">Label</label>
  <div class="InputGroup items-center">
    <select id="select" multiple ...>
      <option value="one">Option 1 label</option>
      <option value="two">Option 2 label</option>
      <option value="three">Option 3 label</option>
    </select>
  </div>
</div>

Alterations

Readonly

If readonly is present, Select produces a hidden input for the selected item. If multiple produces a hidden input for each selected item.

<div class="TextField Select">
  <label ...>Label</label>
  <div class="InputGroup Stack items-center">
    <select id="select" ...>
      ...
    </select>

    <!-- Hidden inputs go here -->

    <div class="Pos-right">
      <svg width="24" height="24" viewBox="0 0 24 24">...</svg>
    </div>
  </div>
</div>

Notes for styling options

You cannot style the <option> when <select> is used in single-mode. You can only style <option> when multiple is used. Even then, only Chrome and Firefox respects styles given to <option>, not Safari.

We’ve added the Fill system to help you style both select and its options.

Styles (editable)

Single Select

Styles (editable)

Multiple Select

Properties and classes

The following classes are used by Select:

Class	Description
`Select`	Styles component container
`Label`	Styles the label

The following properties can be used to add classes to Select.

Property	Description
`class`	Add classes to `Select`
`labelClass`	Add classes to the label

CSS Variables

Select uses the following CSS variables to define its appearance

Variable	Default	Description
`--border-width`	`1px`	Border width
`--border-style`	`solid`	Border style
`--border-color`	`black`	Border color

Styles (editable)

Select

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Properties

You can use these properties to customize Select.

Property	Type	Description
`label`	`string`	Label for the select element
`id`	`string`	`id` of the select element. A random `id` will be generated if this is omitted.
`name`	`string`	Name of the select. (Required).
`items`	`array`	Select items. See `items`. (Required).
`disabled`	`boolean`	Adds the `disabled` state
`readonly`	`boolean`	Adds the `readonly` state
`ref`	`object`	Reference for the select element

Types

Items

List of options for Select. We named it items instead of options because the options term can have double-meaning when creating components.

Type: string[] | object[]

If a list of strings are passed into items, each string will be converted to the value of the option.

<Select
  name="fav-fruit"
  label="Pick your favourite fruit:"
  items={[ 'apple', 'banana', 'carrot']}
/>

<Select
  name="fav-fruit"
  label="Pick your favourite fruit:"
  items={[
    { value: 'apple' },
    { value: 'banana' },
    { value: 'carrot' },
  ]}
/>

Properties that can be passed into each option are as follows:

Property	Type	Description
`value`	`string`	Value for the option. (Required)
`label`	`string`	Label for the option
`disabled`	`boolean`	Adds the `disabled` state
`readonly`	`boolean`	Adds the `readonly` state
`selected`	`boolean`	Selects the option

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.