Select

Displays a list of options for the user to pick from.

Framework

'use client'

import { createListCollection, Portal, Select } from '@fidely-ui/react'
import { BiChevronDown } from 'react-icons/bi'

export const SelectBasics = () => {
  const collection = createListCollection({
    items: ['React', 'Solid', 'Vue', 'Svelte'],
  })

  return (
    <Select.Root
      collection={collection}
      positioning={{ sameWidth: true }}
      maxW={'350px'}
    >
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>
            <BiChevronDown />
          </Select.Indicator>
        </Select.Trigger>
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            {collection.items.map((item) => (
              <Select.Item key={item} item={item}>
                <Select.ItemText>{item}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

Usage

import { Select } from '@fidely-ui/react'

<Select.Root
  collection={collection}
  positioning={{ sameWidth: true }}
  maxW={'350px'}
>
  <Select.Label>Framework</Select.Label>
  <Select.Control>
    <Select.Trigger>
      <Select.ValueText placeholder="Select a Framework" />
      <Select.Indicator>
        <BiChevronDown />
      </Select.Indicator>
    </Select.Trigger>
    <Select.ClearTrigger>Clear</Select.ClearTrigger>
  </Select.Control>
  <Portal>
    <Select.Positioner>
      <Select.Content>
        <Select.ItemGroup>
          <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
          <Select.Item key={item} item={item}>
            <Select.ItemText>Hello</Select.ItemText>
            <Select.ItemIndicator>✓</Select.ItemIndicator>
          </Select.Item>
        </Select.ItemGroup>
      </Select.Content>
    </Select.Positioner>
  </Portal>
  <Select.HiddenSelect />
</Select.Root>

Examples

Variants

Use the variant prop to change the appearance of the Select component.

outline

subtle

'use client'

import { createListCollection, Portal, Select, Stack } from '@fidely-ui/react'
import { BiChevronDown } from 'react-icons/bi'

export const SelectVariant = () => {
  const collection = createListCollection({
    items: ['React', 'Solid', 'Vue', 'Svelte'],
  })

  const variants = ['outline', 'subtle'] as const

  return (
    <Stack gap={3}>
      {variants.map((variant) => (
        <Select.Root
          collection={collection}
          positioning={{ sameWidth: true }}
          maxW={'350px'}
          variant={variant}
          key={variant}
        >
          <Select.Label>{variant}</Select.Label>
          <Select.Control>
            <Select.Trigger>
              <Select.ValueText placeholder="Select a Framework" />
              <Select.Indicator>
                <BiChevronDown />
              </Select.Indicator>
            </Select.Trigger>
          </Select.Control>
          <Portal>
            <Select.Positioner>
              <Select.Content>
                {collection.items.map((item) => (
                  <Select.Item key={item} item={item}>
                    <Select.ItemText>{item}</Select.ItemText>
                    <Select.ItemIndicator>✓</Select.ItemIndicator>
                  </Select.Item>
                ))}
              </Select.Content>
            </Select.Positioner>
          </Portal>
          <Select.HiddenSelect />
        </Select.Root>
      ))}
    </Stack>
  )
}

Sizes

Use the size prop to adjust the size of the Select component.

'use client'

import { createListCollection, Portal, Select, Stack } from '@fidely-ui/react'
import { BiChevronDown } from 'react-icons/bi'

export const SelectSize = () => {
  const collection = createListCollection({
    items: ['React', 'Solid', 'Vue', 'Svelte'],
  })

  const sizes = ['xs', 'sm', 'md', 'lg'] as const

  return (
    <Stack gap={3}>
      {sizes.map((size) => (
        <Select.Root
          collection={collection}
          positioning={{ sameWidth: true }}
          maxW={'350px'}
          size={size}
          key={size}
        >
          <Select.Label>{size}</Select.Label>
          <Select.Control>
            <Select.Trigger>
              <Select.ValueText placeholder="Select a Framework" />
              <Select.Indicator>
                <BiChevronDown />
              </Select.Indicator>
            </Select.Trigger>
          </Select.Control>
          <Portal>
            <Select.Positioner>
              <Select.Content>
                {collection.items.map((item) => (
                  <Select.Item key={item} item={item}>
                    <Select.ItemText>{item}</Select.ItemText>
                    <Select.ItemIndicator>✓</Select.ItemIndicator>
                  </Select.Item>
                ))}
              </Select.Content>
            </Select.Positioner>
          </Portal>
          <Select.HiddenSelect />
        </Select.Root>
      ))}
    </Stack>
  )
}

Option Group

Use the Select.ItemGroup component to group related select options.

Framework

'use client'

import { Portal, Select } from '@fidely-ui/react'
import { createListCollection } from '@fidely-ui/react/collection'
import { BiChevronDown } from 'react-icons/bi'

export const SelectGroup = () => {
  const collection = createListCollection({
    items: ['React', 'Solid', 'Vue', 'Svelte'],
  })

  return (
    <Select.Root
      collection={collection}
      positioning={{ sameWidth: true }}
      maxW={'350px'}
    >
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>
            <BiChevronDown />
          </Select.Indicator>
        </Select.Trigger>
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              {collection.items.map((item) => (
                <Select.Item key={item} item={item}>
                  <Select.ItemText>{item}</Select.ItemText>
                  <Select.ItemIndicator>✓</Select.ItemIndicator>
                </Select.Item>
              ))}
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

Controlled

Use the value and onValueChange props to control the select component.

Framework

'use client'

import { useState } from 'react'
import { createListCollection, Portal, Select } from '@fidely-ui/react'
import { BiChevronDown } from 'react-icons/bi'

export const SelectControlled = () => {
  const [value, setValue] = useState<string[]>([])

  const collection = createListCollection({
    items: ['React', 'Solid', 'Vue', 'Svelte'],
  })

  return (
    <Select.Root
      collection={collection}
      positioning={{ sameWidth: true }}
      maxW={'350px'}
      value={value}
      onValueChange={(e) => setValue(e.value)}
    >
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>
            <BiChevronDown />
          </Select.Indicator>
        </Select.Trigger>
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            {collection.items.map((item) => (
              <Select.Item key={item} item={item}>
                <Select.ItemText>{item}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

Disabled

Use the value and onValueChange props to control the select component.

Framework

'use client'

import { createListCollection, Portal, Select } from '@fidely-ui/react'
import { BiChevronDown } from 'react-icons/bi'

export const SelectDisabled = () => {
  const collection = createListCollection({
    items: ['React', 'Solid', 'Vue', 'Svelte'],
  })

  return (
    <Select.Root
      collection={collection}
      positioning={{ sameWidth: true }}
      maxW={'350px'}
      disabled
    >
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>
            <BiChevronDown />
          </Select.Indicator>
        </Select.Trigger>
        {/* <Select.ClearTrigger>Clear</Select.ClearTrigger> */}
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            {collection.items.map((item) => (
              <Select.Item key={item} item={item}>
                <Select.ItemText>{item}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

Multiple

Use the multiple prop to allow multiple selections.

Framework

'use client'

import { createListCollection, Portal, Select } from '@fidely-ui/react'
import { BiChevronDown } from 'react-icons/bi'

export const SelectMultiple = () => {
  const collection = createListCollection({
    items: ['React', 'Solid', 'Vue', 'Svelte'],
  })

  return (
    <Select.Root
      collection={collection}
      positioning={{ sameWidth: true }}
      maxW={'350px'}
      multiple
    >
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>
            <BiChevronDown />
          </Select.Indicator>
        </Select.Trigger>
        {/* <Select.ClearTrigger>Clear</Select.ClearTrigger> */}
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            {collection.items.map((item) => (
              <Select.Item key={item} item={item}>
                <Select.ItemText>{item}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

Positioning

Use the positioning prop to control the underlying floating-ui options of the select component.

Framework

'use client'

import { createListCollection, Portal, Select } from '@fidely-ui/react'
import { BiChevronDown } from 'react-icons/bi'

export const SelectPositioning = () => {
  const collection = createListCollection({
    items: ['React', 'Solid', 'Vue', 'Svelte'],
  })

  return (
    <Select.Root
      collection={collection}
      positioning={{ placement: 'bottom', flip: false }}
      maxW={'350px'}
    >
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>
            <BiChevronDown />
          </Select.Indicator>
        </Select.Trigger>
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            {collection.items.map((item) => (
              <Select.Item key={item} item={item}>
                <Select.ItemText>{item}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

ClearTrigger

Render the Select.ClearTrigger component to show a clear text or button (you can customize its design as needed).

Clicking the clear button will clear the selected value.

Framework

'use client'

import { createListCollection, Portal, Select } from '@fidely-ui/react'
import { BiChevronDown } from 'react-icons/bi'

export const SelectTrigger = () => {
  const collection = createListCollection({
    items: ['React', 'Solid', 'Vue', 'Svelte'],
  })

  return (
    <Select.Root
      collection={collection}
      positioning={{ sameWidth: true }}
      maxW={'350px'}
    >
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>
            <BiChevronDown />
          </Select.Indicator>
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            {collection.items.map((item) => (
              <Select.Item key={item} item={item}>
                <Select.ItemText>{item}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  )
}