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

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

    The checkbox is a UI component that allows users to select one or more options from a list of choices.
    It is commonly used in forms, surveys, and settings pages.

    <Subtitle>Usage</Subtitle>

    When using checkboxes, it's important to keep in mind the following best practices:

    1. Use checkboxes for selecting multiple options from a list. This is helpful when options are not mutually exclusive.
    2. Use clear and concise labels for each checkbox option. Avoid jargon or ambiguous language.
    3. Group related checkbox options together and label them appropriately. This helps users understand option relationships and make a decision.
    4. Minimize cognitive load by using sensible default values. Ensure default values make sense for users or they may become confused.
    5. Use a single column layout for a list of checkboxes for easy reading and selection. This ensures checkboxes are large enough to be clicked.

    By following these best practices, you can ensure that your checkboxes are effective and user-friendly.

    <Subtitle>👍 When to use</Subtitle>

    Checkboxes should be used when:

    - The user needs to select one or more options from a list of choices.
    - The options are independent of each other.
    - The user needs to see all the options at once.

    <Title>Properties</Title>

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