Select

import { Field, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'ferry-ui'

export default function SelectHero() {
  return (
    <Field label="Currency" hint="New invoices use this currency." className="w-full max-w-xs">
      {(control) => (
        <Select defaultValue="eur">
          <SelectTrigger {...control} className="w-full">
            <SelectValue placeholder="Select a currency" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="usd">US dollar</SelectItem>
            <SelectItem value="eur">Euro</SelectItem>
            <SelectItem value="gbp">Pound sterling</SelectItem>
            <SelectItem value="jpy">Japanese yen</SelectItem>
            <SelectItem value="chf">Swiss franc</SelectItem>
          </SelectContent>
        </Select>
      )}
    </Field>
  )
}

import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'ferry-ui'

export default function SelectLabelFor() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Label htmlFor="member-role">Role</Label>
      <Select defaultValue="member">
        <SelectTrigger id="member-role" className="w-full">
          <SelectValue placeholder="Select a role" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="viewer">Viewer</SelectItem>
          <SelectItem value="member">Member</SelectItem>
          <SelectItem value="billing">Billing manager</SelectItem>
          <SelectItem value="admin">Admin</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'ferry-ui'

const SIZES = ['tiny', 'sm', 'md'] as const

export default function SelectSizes() {
  return (
    <>
      {SIZES.map((size) => (
        <Select key={size} defaultValue="30d">
          <SelectTrigger size={size} aria-label={`Date range, size ${size}`}>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="24h">Last 24 hours</SelectItem>
            <SelectItem value="7d">Last 7 days</SelectItem>
            <SelectItem value="30d">Last 30 days</SelectItem>
            <SelectItem value="90d">Last 90 days</SelectItem>
          </SelectContent>
        </Select>
      ))}
    </>
  )
}

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from 'ferry-ui'

export default function SelectGroups() {
  return (
    <Select defaultValue="europe-paris">
      <SelectTrigger className="w-64" aria-label="Time zone">
        <SelectValue placeholder="Select a time zone" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Americas</SelectLabel>
          <SelectItem value="america-new-york">New York (UTC−05:00)</SelectItem>
          <SelectItem value="america-chicago">Chicago (UTC−06:00)</SelectItem>
          <SelectItem value="america-los-angeles">Los Angeles (UTC−08:00)</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Europe</SelectLabel>
          <SelectItem value="europe-london">London (UTC+00:00)</SelectItem>
          <SelectItem value="europe-paris">Paris (UTC+01:00)</SelectItem>
          <SelectItem value="europe-berlin">Berlin (UTC+01:00)</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Asia Pacific</SelectLabel>
          <SelectItem value="asia-tokyo">Tokyo (UTC+09:00)</SelectItem>
          <SelectItem value="australia-sydney">Sydney (UTC+10:00)</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

import * as React from 'react'
import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'ferry-ui'

export default function SelectControlled() {
  const [language, setLanguage] = React.useState('')

  return (
    <>
      <Select value={language} onValueChange={setLanguage}>
        <SelectTrigger className="w-48" aria-label="Language">
          <SelectValue placeholder="Select a language" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="en">English</SelectItem>
          <SelectItem value="fr">French</SelectItem>
          <SelectItem value="de">German</SelectItem>
          <SelectItem value="es">Spanish</SelectItem>
          <SelectItem value="ja">Japanese</SelectItem>
        </SelectContent>
      </Select>
      {/* An empty value shows the placeholder again. */}
      <Button variant="ghost" disabled={language === ''} onClick={() => setLanguage('')}>
        Clear
      </Button>
    </>
  )
}

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'ferry-ui'

export default function SelectPopper() {
  return (
    <Select defaultValue="fr">
      <SelectTrigger className="w-48" aria-label="Language">
        <SelectValue />
      </SelectTrigger>
      <SelectContent position="popper">
        <SelectItem value="en">English</SelectItem>
        <SelectItem value="fr">French</SelectItem>
        <SelectItem value="de">German</SelectItem>
        <SelectItem value="es">Spanish</SelectItem>
        <SelectItem value="ja">Japanese</SelectItem>
      </SelectContent>
    </Select>
  )
}

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'ferry-ui'
import { Banknote, CreditCard, Landmark, Wallet } from 'lucide-react'

export default function SelectIcons() {
  return (
    <Select defaultValue="card">
      <SelectTrigger className="w-56" aria-label="Payment method">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="card">
          <CreditCard />
          Credit card
        </SelectItem>
        <SelectItem value="transfer">
          <Landmark />
          Bank transfer
        </SelectItem>
        <SelectItem value="wallet">
          <Wallet />
          Digital wallet
        </SelectItem>
        <SelectItem value="cash">
          <Banknote />
          Cash
        </SelectItem>
      </SelectContent>
    </Select>
  )
}

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'ferry-ui'

export default function SelectDisabled() {
  return (
    <>
      <Select disabled defaultValue="eur">
        <SelectTrigger className="w-40" aria-label="Currency">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="usd">US dollar</SelectItem>
          <SelectItem value="eur">Euro</SelectItem>
          <SelectItem value="gbp">Pound sterling</SelectItem>
        </SelectContent>
      </Select>
      <Select defaultValue="member">
        <SelectTrigger className="w-40" aria-label="Role">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="viewer">Viewer</SelectItem>
          <SelectItem value="member">Member</SelectItem>
          <SelectItem value="admin">Admin</SelectItem>
          <SelectItem value="owner" disabled>
            Owner, by transfer only
          </SelectItem>
        </SelectContent>
      </Select>
    </>
  )
}

import * as React from 'react'
import { Button, Field, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast } from 'ferry-ui'

export default function SelectInvalid() {
  const [role, setRole] = React.useState('')
  const [error, setError] = React.useState<string>()

  function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setError(role === '' ? 'Select a role for this member.' : undefined)
    if (role !== '') toast.success('Invitation sent')
  }

  function change(value: string) {
    setRole(value)
    setError(undefined)
  }

  return (
    <form noValidate onSubmit={submit} className="flex w-full max-w-xs flex-col items-start gap-4">
      <Field label="Role" error={error} className="w-full">
        {(control) => (
          <Select value={role} onValueChange={change}>
            <SelectTrigger {...control} className="w-full">
              <SelectValue placeholder="Select a role" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="viewer">Viewer</SelectItem>
              <SelectItem value="member">Member</SelectItem>
              <SelectItem value="billing">Billing manager</SelectItem>
              <SelectItem value="admin">Admin</SelectItem>
            </SelectContent>
          </Select>
        )}
      </Field>
      <Button type="submit">Send invitation</Button>
    </form>
  )
}