import { Canvas, DocsStory, Meta, Controls } from '@storybook/blocks'
import {
  ResourceLinks,
  KAIOInstallation,
  DosAndDonts,
  DoOrDont,
  ReplacementNotice,
} from '~storybook/components'
import * as SingleSelectStories from './SingleSelect.stories'

<Meta title="Components/SingleSelect/Usage Guidelines" />

# SingleSelect

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/SingleSelect"
  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37837&mode=dev"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select"
  apiSpecification="/?path=/docs/components-singleselect-api-specification--docs"
/>

<KAIOInstallation exportNames={'SingleSelect'} />

## Overview

A select lets you choose one option from an options menu.

<Canvas of={SingleSelectStories.Playground} sourceState="hidden" />

<Controls
  of={SingleSelectStories.Playground}
  include={[
    'label',
    'items',
    'status',
    'validationMessage',
    'description',
    'isDisabled',
    'isRequired',
    'isFullWidth',
    'isReversed',
  ]}
/>

## Examples

### Single options

<Canvas of={SingleSelectStories.SingleItems} />

### Grouped options

<Canvas of={SingleSelectStories.GroupedItems} />

### Disabled options

<Canvas of={SingleSelectStories.DisabledItems} />

### Validation states

<Canvas of={SingleSelectStories.Validation} />

### Full width

<Canvas of={SingleSelectStories.FullWidth} />

### Reversed

<Canvas of={SingleSelectStories.ReversedSelect} />