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

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

    Radio buttons are a type of form element that allows users to select a single option from a list of two or more options.
    They are commonly used in forms, surveys, and quizzes.

    <Subtitle>Usage</Subtitle>

    When using radio button components in your forms or surveys, it is important to follow certain best practices to ensure a positive user experience. Here are some additional usage best practices to consider:

    - Use radio buttons consistently throughout the form or survey to create a clear and predictable user experience. Inconsistency can lead to confusion and frustration for users.
    - Use radio buttons sparingly to avoid overwhelming the user with too many options. Too many options can lead to decision paralysis and deter users from completing the form or survey.
    - Use radio buttons to provide the user with a limited set of options that are relevant to the task at hand. Offering too many irrelevant options can be distracting and frustrating for users.
    - Use radio buttons in conjunction with other form elements, such as text inputs and drop-down menus, to provide a more flexible and user-friendly interface. This can help accommodate a variety of user preferences and needs.

    **Points to Consider**

    - Consider the order of the options. Arrange the options in a logical and meaningful order that makes sense to the user.
    - Consider the language and tone of the labels. Use language that is familiar to the user and matches the tone of the overall form or survey.
    - Consider the visual design of the radio buttons. Ensure that the radio buttons are easy to see and use, and that they are consistent with the overall design of the form or survey.
    - Consider the accessibility of the radio buttons. Ensure that the radio buttons can be easily used by users with disabilities, including those who use assistive technology.

    <Subtitle>👍 When to use</Subtitle>

    Radio buttons are best used when:

    - Users need to select only one option from a list of options
    - Users need to compare their options

    <Title>Properties</Title>

    <Subtitle>bq-radio-group</Subtitle>

    <ArgTypes of="bq-radio-group" />

    <Subtitle>bq-radio</Subtitle>

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