Select

import { FormGroup, FormLabel, FormSelect, Option, SelectPlaceholder } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormGroup style={{ width: '100%', maxWidth: 480 }}>
      <FormLabel htmlFor="select-country">Country</FormLabel>
      <FormSelect name="select-country" autoComplete="country">
        <SelectPlaceholder>Select a country</SelectPlaceholder>
        <Option value="be">Belgium</Option>
        <Option value="hu">Hungary</Option>
        <Option value="nl">Netherlands</Option>
      </FormSelect>
    </FormGroup>
  )
}

import { FormGroup, FormLabel, FormSelect, Option, SelectPlaceholder } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormGroup style={{ width: '100%', maxWidth: 480 }}>
      <FormLabel htmlFor="select-category">Category</FormLabel>
      <FormSelect name="select-category">
        <SelectPlaceholder hidden={false} disabled={false}>
          All categories
        </SelectPlaceholder>
        <Option value="news">News</Option>
        <Option value="guides">Guides</Option>
        <Option value="releases">Releases</Option>
      </FormSelect>
    </FormGroup>
  )
}

import { FormGroup, FormLabel, FormSelect, FormSelectIcon, Option } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormGroup style={{ width: '100%', maxWidth: 480 }}>
      <FormLabel htmlFor="select-sort">Sort by</FormLabel>
      <FormSelect
        name="select-sort"
        defaultValue="newest"
        disableIcon
        append={
          <FormSelectIcon>
            <svg
              viewBox="0 -960 960 960"
              width="100%"
              height="100%"
              fill="currentColor"
              aria-hidden="true"
              focusable="false"
            >
              <path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" />
            </svg>
          </FormSelectIcon>
        }
      >
        <Option value="newest">Newest first</Option>
        <Option value="oldest">Oldest first</Option>
        <Option value="title">Title</Option>
      </FormSelect>
    </FormGroup>
  )
}

import { FormGroup, FormLabel, FormSelect, Option, SelectPlaceholder } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ display: 'grid', gap: 24, width: '100%', maxWidth: 480 }}>
      <FormGroup>
        <FormLabel htmlFor="select-size">Size</FormLabel>
        <FormSelect name="select-size" required selectClassName="is-invalid" aria-invalid>
          <SelectPlaceholder>Choose a size</SelectPlaceholder>
          <Option value="s">Small</Option>
          <Option value="m">Medium</Option>
        </FormSelect>
      </FormGroup>
      <FormGroup>
        <FormLabel htmlFor="select-plan">Plan</FormLabel>
        <FormSelect name="select-plan" defaultValue="team" disabled>
          <Option value="team">Team</Option>
        </FormSelect>
      </FormGroup>
    </div>
  )
}