Select

import { Field, Label } from '@/components/fieldset'
import { Select } from '@/components/select'

export default function Example() {
  return (
    <Field>
      <Label>Billing interval</Label>
      <Select name="interval">
        <option value="monthly">Monthly</option>
        <option value="quarterly">Quarterly</option>
        <option value="yearly">Yearly</option>
      </Select>
    </Field>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import Field from '@/components/field.vue'
import Label from '@/components/label.vue'
import Select from '@/components/select.vue'

const interval = ref('monthly')
</script>

<template>
  <Field>
    <Label>Billing interval</Label>
    <Select name="interval" v-model="interval">
      <option value="monthly">Monthly</option>
      <option value="quarterly">Quarterly</option>
      <option value="yearly">Yearly</option>
    </Select>
  </Field>
</template>

import { Description, Field, Label } from '@/components/fieldset'
import { Select } from '@/components/select'

export default function Example() {
  return (
    <Field>
      <Label>Invoice currency</Label>
      <Description>Only new invoices use it. Invoices already sent keep their currency.</Description>
      <Select name="currency" defaultValue="usd">
        <option value="usd">USD, US dollar</option>
        <option value="eur">EUR, Euro</option>
        <option value="cad">CAD, Canadian dollar</option>
        <option value="xaf">XAF, Central African CFA franc</option>
      </Select>
    </Field>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import Description from '@/components/description.vue'
import Field from '@/components/field.vue'
import Label from '@/components/label.vue'
import Select from '@/components/select.vue'

const currency = ref('usd')
</script>

<template>
  <Field>
    <Label>Invoice currency</Label>
    <Description>Only new invoices use it. Invoices already sent keep their currency.</Description>
    <Select name="currency" v-model="currency">
      <option value="usd">USD, US dollar</option>
      <option value="eur">EUR, Euro</option>
      <option value="cad">CAD, Canadian dollar</option>
      <option value="xaf">XAF, Central African CFA franc</option>
    </Select>
  </Field>
</template>

<Field>
  <Label>Event to replay</Label>
  <Select name="event" defaultValue="invoice.paid">
    <optgroup label="Invoices">
      <option value="invoice.created">invoice.created</option>
      <option value="invoice.paid">invoice.paid</option>
      <option value="invoice.voided">invoice.voided</option>
    </optgroup>
    <optgroup label="Payouts">
      <option value="payout.paid">payout.paid</option>
      <option value="payout.failed">payout.failed</option>
    </optgroup>
    <optgroup label="Customers">
      <option value="customer.created">customer.created</option>
    </optgroup>
  </Select>
</Field>

<Field>
  <Label>Event to replay</Label>
  <Select name="event" v-model="event">
    <optgroup label="Invoices">
      <option value="invoice.created">invoice.created</option>
      <option value="invoice.paid">invoice.paid</option>
      <option value="invoice.voided">invoice.voided</option>
    </optgroup>
    <optgroup label="Payouts">
      <option value="payout.paid">payout.paid</option>
      <option value="payout.failed">payout.failed</option>
    </optgroup>
    <optgroup label="Customers">
      <option value="customer.created">customer.created</option>
    </optgroup>
  </Select>
</Field>

<Field>
  <Label>Payment terms</Label>
  <Select className="max-w-40" name="terms" defaultValue="net_30">
    <option value="receipt">Due on receipt</option>
    <option value="net_15">Net 15</option>
    <option value="net_30">Net 30</option>
    <option value="net_60">Net 60</option>
  </Select>
</Field>

<Field>
  <Label>Payment terms</Label>
  <Select class="max-w-40" name="terms" v-model="terms">
    <option value="receipt">Due on receipt</option>
    <option value="net_15">Net 15</option>
    <option value="net_30">Net 30</option>
    <option value="net_60">Net 60</option>
  </Select>
</Field>

import { Select } from '@/components/select'

export default function Example() {
  return (
    <div className="flex items-center gap-3">
      <label htmlFor="per_page" className="text-base/6 text-zinc-950 select-none sm:text-sm/6 dark:text-white">
        Rows per page
      </label>
      <Select id="per_page" name="per_page" className="max-w-24" defaultValue="50">
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </Select>
    </div>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import Select from '@/components/select.vue'

const perPage = ref('50')
</script>

<template>
  <div class="flex items-center gap-3">
    <label for="per_page" class="text-base/6 text-zinc-950 select-none sm:text-sm/6 dark:text-white">
      Rows per page
    </label>
    <Select id="per_page" name="per_page" class="max-w-24" v-model="perPage">
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </Select>
  </div>
</template>

<Field disabled>
  <Label>Data region</Label>
  <Description>Chosen when the workspace was created. It cannot be moved.</Description>
  <Select name="region">
    <option value="eu-central">Europe (Frankfurt)</option>
    <option value="us-east">United States (Virginia)</option>
  </Select>
</Field>

<Field disabled>
  <Label>Data region</Label>
  <Description>Chosen when the workspace was created. It cannot be moved.</Description>
  <Select name="region" v-model="region">
    <option value="eu-central">Europe (Frankfurt)</option>
    <option value="us-east">United States (Virginia)</option>
  </Select>
</Field>

import { ErrorMessage, Field, Label } from '@/components/fieldset'
import { Select } from '@/components/select'

export default function Example({ errors }) {
  return (
    <Field>
      <Label>Plan</Label>
      <Select name="plan" defaultValue="" invalid={errors.has('plan')}>
        <option value="" disabled>
          Choose a plan&hellip;
        </option>
        <option value="starter">Starter</option>
        <option value="growth">Growth</option>
        <option value="scale">Scale</option>
      </Select>
      {errors.has('plan') && <ErrorMessage>{errors.get('plan')}</ErrorMessage>}
    </Field>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import ErrorMessage from '@/components/error-message.vue'
import Field from '@/components/field.vue'
import Label from '@/components/label.vue'
import Select from '@/components/select.vue'

defineProps<{ errors: Map<string, string> }>()

const plan = ref('')
</script>

<template>
  <Field>
    <Label>Plan</Label>
    <Select name="plan" v-model="plan" :invalid="errors.has('plan')">
      <option value="" disabled>Choose a plan&hellip;</option>
      <option value="starter">Starter</option>
      <option value="growth">Growth</option>
      <option value="scale">Scale</option>
    </Select>
    <ErrorMessage v-if="errors.has('plan')">{{ errors.get('plan') }}</ErrorMessage>
  </Field>
</template>

<Field>
  <Label>Alert these members</Label>
  <Description>Hold Cmd or Ctrl to pick more than one.</Description>
  <Select name="members" multiple defaultValue={['ngozi', 'samba']}>
    <option value="ngozi">Ngozi Adeyemi</option>
    <option value="yao">Yao Kouassi</option>
    <option value="grace">Grace Mbemba</option>
    <option value="samba">Samba Ndiaye</option>
    <option value="emma">Emma Weber</option>
  </Select>
</Field>

<Field>
  <Label>Alert these members</Label>
  <Description>Hold Cmd or Ctrl to pick more than one.</Description>
  <Select name="members" multiple v-model="members">
    <option value="ngozi">Ngozi Adeyemi</option>
    <option value="yao">Yao Kouassi</option>
    <option value="grace">Grace Mbemba</option>
    <option value="samba">Samba Ndiaye</option>
    <option value="emma">Emma Weber</option>
  </Select>
</Field>

'use client'

import { useState } from 'react'
import { Description, Field, Label } from '@/components/fieldset'
import { Select } from '@/components/select'

const when = { daily: 'every business day', weekly: 'every Monday', monthly: 'on the 1st of each month' }

export default function Example() {
  let [schedule, setSchedule] = useState('weekly')

  return (
    <Field>
      <Label>Payout schedule</Label>
      <Select name="payout_schedule" value={schedule} onChange={(event) => setSchedule(event.target.value)}>
        <option value="daily">Daily</option>
        <option value="weekly">Weekly</option>
        <option value="monthly">Monthly</option>
      </Select>
      <Description>Your balance is paid out {when[schedule]}.</Description>
    </Field>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import Description from '@/components/description.vue'
import Field from '@/components/field.vue'
import Label from '@/components/label.vue'
import Select from '@/components/select.vue'

const when = { daily: 'every business day', weekly: 'every Monday', monthly: 'on the 1st of each month' }
const schedule = ref<keyof typeof when>('weekly')
</script>

<template>
  <Field>
    <Label>Payout schedule</Label>
    <Select name="payout_schedule" v-model="schedule">
      <option value="daily">Daily</option>
      <option value="weekly">Weekly</option>
      <option value="monthly">Monthly</option>
    </Select>
    <Description>Your balance is paid out {{ when[schedule] }}.</Description>
  </Field>
</template>