Select

import * as React from 'react'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const officers = {
  anna: 'Anna Lindqvist',
  ingrid: 'Ingrid Hansen',
  mikko: 'Mikko Virtanen',
  omar: 'Omar Haddad',
}

export function SelectWithLabel() {
  const id = React.useId()
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor={`${id}-officer`}>Case officer</FieldLabel>
      <Select defaultValue="ingrid" items={officers}>
        <SelectTrigger id={`${id}-officer`} className="w-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {Object.entries(officers).map(([value, label]) => (
            <SelectItem key={value} value={value}>
              {label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <FieldDescription>The officer is notified by email when the case is assigned.</FieldDescription>
    </Field>
  )
}

import * as React from 'react'
import { Field, FieldLabel } from '@/components/ui/field'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const periods = {
  '7': 'Last 7 days',
  '30': 'Last 30 days',
  '365': 'Last 12 months',
}

export function SelectSizes() {
  const id = React.useId()
  return (
    <div className="flex flex-wrap items-end gap-4">
      {(['sm', 'default'] as const).map((size) => (
        <Field key={size} className="w-44">
          <FieldLabel htmlFor={`${id}-${size}`}>{size === 'sm' ? 'Small' : 'Default'}</FieldLabel>
          <Select defaultValue="30" items={periods}>
            <SelectTrigger id={`${id}-${size}`} size={size} className="w-full">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {Object.entries(periods).map(([value, label]) => (
                <SelectItem key={value} value={value}>
                  {label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </Field>
      ))}
    </div>
  )
}

import * as React from 'react'
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const committees = [
  {
    label: 'Council',
    items: [
      { value: 'council', label: 'Municipal council' },
      { value: 'executive', label: 'Executive committee' },
    ],
  },
  {
    label: 'Committees',
    items: [
      { value: 'building', label: 'Building committee' },
      { value: 'education', label: 'Education committee' },
      { value: 'social', label: 'Social services committee' },
      { value: 'environment', label: 'Environment committee' },
    ],
  },
]

export function SelectWithGroups() {
  return (
    <Select items={committees}>
      <SelectTrigger className="w-[240px]" aria-label="Committee">
        <SelectValue placeholder="Select committee" />
      </SelectTrigger>
      <SelectContent>
        {committees.map((group, index) => (
          <React.Fragment key={group.label}>
            {index > 0 && <SelectSeparator />}
            <SelectGroup>
              <SelectLabel>{group.label}</SelectLabel>
              {group.items.map((item) => (
                <SelectItem key={item.value} value={item.value}>
                  {item.label}
                </SelectItem>
              ))}
            </SelectGroup>
          </React.Fragment>
        ))}
      </SelectContent>
    </Select>
  )
}

import { CircleCheckIcon, CircleDashedIcon, CircleDotIcon, CirclePauseIcon } from 'lucide-react'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const statuses = [
  { value: 'registered', label: 'Registered', icon: CircleDashedIcon },
  { value: 'in-progress', label: 'In progress', icon: CircleDotIcon },
  { value: 'on-hold', label: 'Awaiting supplement', icon: CirclePauseIcon },
  { value: 'decided', label: 'Decided', icon: CircleCheckIcon },
]

export function SelectWithIcons() {
  return (
    <Select
      defaultValue="in-progress"
      items={statuses.map((status) => ({
        value: status.value,
        label: (
          <>
            <status.icon />
            {status.label}
          </>
        ),
      }))}
    >
      <SelectTrigger className="w-[200px]" aria-label="Case status">
        <SelectValue placeholder="Select status" />
      </SelectTrigger>
      <SelectContent>
        {statuses.map((status) => (
          <SelectItem key={status.value} value={status.value}>
            <status.icon />
            {status.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const municipalities: [string, string[]][] = [
  ['Sweden', ['Göteborg', 'Linköping', 'Malmö', 'Stockholm', 'Umeå', 'Uppsala', 'Västerås', 'Örebro']],
  ['Norway', ['Bergen', 'Oslo', 'Stavanger', 'Tromsø', 'Trondheim']],
  ['Finland', ['Espoo', 'Helsinki', 'Oulu', 'Tampere', 'Turku', 'Vantaa']],
  ['Denmark', ['Aalborg', 'Aarhus', 'København', 'Odense']],
]

const municipalityItems = municipalities.map(([country, names]) => ({
  label: country,
  items: names.map((name) => ({ value: `${country}-${name}`.toLowerCase(), label: name })),
}))

export function SelectScrollable() {
  return (
    <Select items={municipalityItems}>
      <SelectTrigger className="w-[240px]" aria-label="Municipality">
        <SelectValue placeholder="Select municipality" />
      </SelectTrigger>
      <SelectContent>
        {municipalityItems.map((group) => (
          <SelectGroup key={group.label}>
            <SelectLabel>{group.label}</SelectLabel>
            {group.items.map((item) => (
              <SelectItem key={item.value} value={item.value}>
                {item.label}
              </SelectItem>
            ))}
          </SelectGroup>
        ))}
      </SelectContent>
    </Select>
  )
}

import { GlobeIcon, MailIcon, SmartphoneIcon } from 'lucide-react'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const channels = [
  { value: 'email', label: 'Email', icon: MailIcon },
  { value: 'sms', label: 'Text message', icon: SmartphoneIcon },
  { value: 'portal', label: 'My pages only', icon: GlobeIcon },
]

export function SelectPopperPosition() {
  return (
    <Select
      items={channels.map((channel) => ({
        value: channel.value,
        label: (
          <>
            <channel.icon />
            {channel.label}
          </>
        ),
      }))}
    >
      <SelectTrigger className="w-[200px]" aria-label="Notify me by">
        <SelectValue placeholder="Notify me by" />
      </SelectTrigger>
      <SelectContent alignItemWithTrigger={false}>
        {channels.map((channel) => (
          <SelectItem key={channel.value} value={channel.value}>
            <channel.icon />
            {channel.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}

import * as React from 'react'
import { Field, FieldGroup, FieldLabel } from '@/components/ui/field'
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const slots = {
  '0900': '09:00',
  '0930': '09:30 (booked)',
  '1000': '10:00',
  '1030': '10:30 (booked)',
}

export function SelectDisabled() {
  const id = React.useId()
  return (
    <FieldGroup className="w-xs max-w-full">
      <Field>
        <FieldLabel htmlFor={`${id}-slot`}>Appointment</FieldLabel>
        <Select items={slots}>
          <SelectTrigger id={`${id}-slot`} className="w-full">
            <SelectValue placeholder="Select a time" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Tuesday 9 June 2026</SelectLabel>
              <SelectItem value="0900">09:00</SelectItem>
              <SelectItem value="0930" disabled>
                09:30 (booked)
              </SelectItem>
              <SelectItem value="1000">10:00</SelectItem>
              <SelectItem value="1030" disabled>
                10:30 (booked)
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </Field>
      <Field data-disabled="true">
        <FieldLabel htmlFor={`${id}-room`}>Meeting room</FieldLabel>
        <Select disabled>
          <SelectTrigger id={`${id}-room`} className="w-full">
            <SelectValue placeholder="Choose a time first" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="reception">Reception, City Hall</SelectItem>
          </SelectContent>
        </Select>
      </Field>
    </FieldGroup>
  )
}

import * as React from 'react'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const readOnlyCaseTypes = {
  'building-permit': 'Building permit',
  'parking-permit': 'Parking permit',
}

export function SelectReadOnly() {
  const id = React.useId()
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor={`${id}-type`}>Case type</FieldLabel>
      <Select defaultValue="building-permit" items={readOnlyCaseTypes} readOnly>
        <SelectTrigger id={`${id}-type`} className="w-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="building-permit">Building permit</SelectItem>
          <SelectItem value="parking-permit">Parking permit</SelectItem>
        </SelectContent>
      </Select>
      <FieldDescription>Set when case 2026-04812 was registered.</FieldDescription>
    </Field>
  )
}

import * as React from 'react'
import { Field, FieldError, FieldLabel } from '@/components/ui/field'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const districts = {
  centrum: 'Centrum',
  ekbacken: 'Ekbacken',
  lindholmen: 'Lindholmen',
  solberga: 'Solberga',
}

export function SelectInvalid() {
  const id = React.useId()
  return (
    <Field data-invalid="true" className="w-full max-w-xs">
      <FieldLabel htmlFor={`${id}-district`}>District</FieldLabel>
      <Select items={districts}>
        <SelectTrigger id={`${id}-district`} aria-invalid aria-describedby={`${id}-error`} className="w-full">
          <SelectValue placeholder="Select district" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="centrum">Centrum</SelectItem>
          <SelectItem value="ekbacken">Ekbacken</SelectItem>
          <SelectItem value="solberga">Solberga</SelectItem>
        </SelectContent>
      </Select>
      <FieldError id={`${id}-error`}>Select the district where the problem is.</FieldError>
    </Field>
  )
}

import * as React from 'react'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const languageNames = {
  en: 'English',
  sv: 'Swedish',
  fi: 'Finnish',
  ar: 'Arabic',
}

const languages: Record<string, string> = {
  en: 'Decisions and letters will be sent in English.',
  sv: 'Beslut och brev skickas på svenska.',
  fi: 'Päätökset ja kirjeet lähetetään suomeksi.',
  ar: 'Decisions will be sent in Swedish with an Arabic summary.',
}

export function SelectControlled() {
  const id = React.useId()
  const [value, setValue] = React.useState('en')

  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor={`${id}-language`}>Language for correspondence</FieldLabel>
      <Select value={value} onValueChange={(next) => next && setValue(next)} items={languageNames}>
        <SelectTrigger id={`${id}-language`} className="w-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="en">English</SelectItem>
          <SelectItem value="sv">Swedish</SelectItem>
          <SelectItem value="fi">Finnish</SelectItem>
          <SelectItem value="ar">Arabic</SelectItem>
        </SelectContent>
      </Select>
      <FieldDescription aria-live="polite">
        <span lang={value === 'sv' || value === 'fi' ? value : undefined}>{languages[value]}</span>
      </FieldDescription>
    </Field>
  )
}

import * as React from 'react'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Field, FieldGroup, FieldLabel } from '@/components/ui/field'
import { Textarea } from '@/components/ui/textarea'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const districts = {
  centrum: 'Centrum',
  ekbacken: 'Ekbacken',
  lindholmen: 'Lindholmen',
  solberga: 'Solberga',
}

const categories = {
  pothole: 'Pothole',
  lighting: 'Street lighting',
  graffiti: 'Graffiti',
  snow: 'Snow and ice',
  playground: 'Playground',
}

export function SelectInForm() {
  const id = React.useId()
  return (
    <Card className="w-md max-w-full">
      <CardHeader>
        <CardTitle>Report a problem</CardTitle>
        <CardDescription>Streets, parks and public spaces in Lindå</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <div className="grid gap-4 sm:grid-cols-2">
            <Field>
              <FieldLabel htmlFor={`${id}-category`}>Category</FieldLabel>
              <Select defaultValue="lighting" items={categories}>
                <SelectTrigger id={`${id}-category`} className="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(categories).map(([value, label]) => (
                    <SelectItem key={value} value={value}>
                      {label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </Field>
            <Field>
              <FieldLabel htmlFor={`${id}-district`}>District</FieldLabel>
              <Select items={districts}>
                <SelectTrigger id={`${id}-district`} className="w-full">
                  <SelectValue placeholder="Select district" />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(districts).map(([value, label]) => (
                    <SelectItem key={value} value={value}>
                      {label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </Field>
          </div>
          <Field>
            <FieldLabel htmlFor={`${id}-description`}>Description</FieldLabel>
            <Textarea
              id={`${id}-description`}
              placeholder="The street light outside Storgatan 14 has been out since Monday."
            />
          </Field>
        </FieldGroup>
      </CardContent>
      <CardFooter className="justify-end">
        <Button>Send report</Button>
      </CardFooter>
    </Card>
  )
}