Select

<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>

<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>

<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>