import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs';

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container" >
    <Title>Select</Title>

    The Select Component is a UI element used to allow users to select from a list of options.
    Select components are commonly used in forms and other applications to provide a convenient way for users to select a value from a list of options.

    <Subtitle>Usage</Subtitle>

    - Allowing users to select from a list of options, such as a list of countries, a list of colors, or a list of dates.
    - Filtering or narrowing down a list of options, such as by searching or selecting a category, to make it easier for users to find the option they need.
    - Providing a compact and efficient way to select a value from a large list of options, without taking up too much space on the screen.

    <Subtitle>👍 When to use</Subtitle>

    Use the Select component when:

    - Choosing from a predefined list: Select components are ideal for situations where users need to choose a single option from a predetermined list of options.
    - Consistent option selection: If the options available are consistent across users or use cases, a select component provides a standardized and familiar interface for users to make their selections.
    - Limited screen space: If screen real estate is limited, a select component can be a space-efficient way of presenting a list of options without cluttering the interface.

    <Title>Properties</Title>

    <ArgTypes of="bq-select" />
  </div>
</div>
