ZUI — Select

Usage

<select class="zui-select">
<option value="">Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

import { Select } from '@mrmartineau/zui/react'

<Select>
<option value="">Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</Select>

---
import { Select } from '@mrmartineau/zui/astro'
---

<Select>
<option value="">Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</Select>

import { Select } from '@mrmartineau/zui/solid'

<Select>
<option value="">Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</Select>

<script lang="ts">
import { Select } from '@mrmartineau/zui/svelte'
let value = $state('')
</script>

<Select bind:value>
<option value="">Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</Select>

<template>
<Select>
<option value="">Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</Select>
</template>

<script setup>
import { Select } from '@mrmartineau/zui/vue'
</script>

With Label

Country

<div class="zui-field">
<label class="zui-label" for="country">Country</label>
<select class="zui-select" id="country">
<option value="">Select a country</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="de">Germany</option>
<option value="fr">France</option>
</select>
</div>

import { Field, Label, Select } from '@mrmartineau/zui/react'

<Field>
<Label htmlFor="country">Country</Label>
<Select id="country">
<option value="">Select a country</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="de">Germany</option>
<option value="fr">France</option>
</Select>
</Field>

---
import { Field, Label, Select } from '@mrmartineau/zui/astro'
---

<Field>
<Label for="country">Country</Label>
<Select id="country">
<option value="">Select a country</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="de">Germany</option>
<option value="fr">France</option>
</Select>
</Field>

import { Field, Label, Select } from '@mrmartineau/zui/solid'

<Field>
<Label htmlFor="country">Country</Label>
<Select id="country">
<option value="">Select a country</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="de">Germany</option>
<option value="fr">France</option>
</Select>
</Field>

<script lang="ts">
import { Field, Label, Select } from '@mrmartineau/zui/svelte'
let country = $state('')
</script>

<Field>
<Label for="country">Country</Label>
<Select id="country" bind:value={country}>
<option value="">Select a country</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="de">Germany</option>
<option value="fr">France</option>
</Select>
</Field>

<template>
<Field>
<Label for="country">Country</Label>
<Select id="country">
<option value="">Select a country</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="de">Germany</option>
<option value="fr">France</option>
</Select>
</Field>
</template>

<script setup>
import { Field, Label, Select } from '@mrmartineau/zui/vue'
</script>

Disabled

<select class="zui-select" disabled>
<option>Cannot change</option>
</select>

import { Select } from '@mrmartineau/zui/react'

<Select disabled>
<option>Cannot change</option>
</Select>

---
import { Select } from '@mrmartineau/zui/astro'
---

<Select disabled>
<option>Cannot change</option>
</Select>

import { Select } from '@mrmartineau/zui/solid'

<Select disabled>
<option>Cannot change</option>
</Select>

<script lang="ts">
import { Select } from '@mrmartineau/zui/svelte'
</script>

<Select disabled>
<option>Cannot change</option>
</Select>

<template>
<Select disabled>
<option>Cannot change</option>
</Select>
</template>

<script setup>
import { Select } from '@mrmartineau/zui/vue'
</script>

Shape

Use the shape prop to change the corners. It works the same as on Button: default (rounded), hard (square), soft (pill) and squircle.

A squircle is a rounded square with smooth corners. Browsers without corner-shape support show normal rounded corners. To make squircle the default everywhere, see Squircle.

Default (rounded)

Hard

Soft

Squircle

<div class="zui-field">
<label class="zui-label" for="default-select">Default (rounded)</label>
<select class="zui-select" id="default-select"><option>Option one</option><option>Option two</option></select>
</div>
<div class="zui-field">
<label class="zui-label" for="hard-select">Hard</label>
<select class="zui-select zui-select-shape-hard" id="hard-select"><option>Option one</option><option>Option two</option></select>
</div>
<div class="zui-field">
<label class="zui-label" for="soft-select">Soft</label>
<select class="zui-select zui-select-shape-soft" id="soft-select"><option>Option one</option><option>Option two</option></select>
</div>
<div class="zui-field">
<label class="zui-label" for="squircle-select">Squircle</label>
<select class="zui-select zui-select-shape-squircle" id="squircle-select"><option>Option one</option><option>Option two</option></select>
</div>

import { Field, Label, Select } from '@mrmartineau/zui/react'

<Field>
<Label htmlFor="default-select">Default (rounded)</Label>
<Select id="default-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>
<Field>
<Label htmlFor="hard-select">Hard</Label>
<Select shape="hard" id="hard-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>
<Field>
<Label htmlFor="soft-select">Soft</Label>
<Select shape="soft" id="soft-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>
<Field>
<Label htmlFor="squircle-select">Squircle</Label>
<Select shape="squircle" id="squircle-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>

---
import { Field, Label, Select } from '@mrmartineau/zui/astro'
---

<Field>
<Label for="default-select">Default (rounded)</Label>
<Select id="default-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>
<Field>
<Label for="hard-select">Hard</Label>
<Select shape="hard" id="hard-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>
<Field>
<Label for="soft-select">Soft</Label>
<Select shape="soft" id="soft-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>
<Field>
<Label for="squircle-select">Squircle</Label>
<Select shape="squircle" id="squircle-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>

import { Field, Label, Select } from '@mrmartineau/zui/solid'

<Field>
<Label for="default-select">Default (rounded)</Label>
<Select id="default-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>
<Field>
<Label for="hard-select">Hard</Label>
<Select shape="hard" id="hard-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>
<Field>
<Label for="soft-select">Soft</Label>
<Select shape="soft" id="soft-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>
<Field>
<Label for="squircle-select">Squircle</Label>
<Select shape="squircle" id="squircle-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>

<script lang="ts">
import { Field, Label, Select } from '@mrmartineau/zui/svelte'
</script>

<Field>
<Label for="default-select">Default (rounded)</Label>
<Select id="default-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>
<Field>
<Label for="hard-select">Hard</Label>
<Select shape="hard" id="hard-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>
<Field>
<Label for="soft-select">Soft</Label>
<Select shape="soft" id="soft-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>
<Field>
<Label for="squircle-select">Squircle</Label>
<Select shape="squircle" id="squircle-select">
  <option>Option one</option>
  <option>Option two</option>
</Select>
</Field>

<template>
<Field>
  <Label for="default-select">Default (rounded)</Label>
  <Select id="default-select">
    <option>Option one</option>
    <option>Option two</option>
  </Select>
</Field>
<Field>
  <Label for="hard-select">Hard</Label>
  <Select shape="hard" id="hard-select">
    <option>Option one</option>
    <option>Option two</option>
  </Select>
</Field>
<Field>
  <Label for="soft-select">Soft</Label>
  <Select shape="soft" id="soft-select">
    <option>Option one</option>
    <option>Option two</option>
  </Select>
</Field>
<Field>
  <Label for="squircle-select">Squircle</Label>
  <Select shape="squircle" id="squircle-select">
    <option>Option one</option>
    <option>Option two</option>
  </Select>
</Field>
</template>

<script setup>
import { Field, Label, Select } from '@mrmartineau/zui/vue'
</script>

CSS custom properties

Set these on :root, on a wrapper, or on the element. See Component custom properties.

Property	Default	Description
`--zui-select-radius`	`var(--radius-lg)`	Border radius
`--zui-select-border`	`var(--color-border)`	Border colour
`--zui-select-bg`	`var(--color-background)`	Background colour
`--zui-select-fg`	`var(--color-text)`	Text colour
`--zui-select-padding-block`	`var(--space-3xs)`	Vertical padding
`--zui-select-padding-inline`	`var(--space-xs)`	Horizontal padding
`--zui-select-font-size`	`var(--step-0)`	Font size
`--zui-select-focus-border`	`var(--color-theme)`	Border colour on focus