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

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

    The Input component is a fundamental user interface element that allows users to input data by typing it into a text field. It is commonly used in web and mobile applications for various purposes, such as collecting user information, search inputs, and login forms.

    <Subtitle>Usage</Subtitle>

    - Do use the Input component to provide a visual and interactive way for users to input data.
    - Do make the Input component accessible by providing appropriate labels and helpful hints.
    - Do provide appropriate input validation to enhance data integrity and prevent errors.
    - Do test the Input component across different browsers and devices for compatibility and responsiveness.

    <Subtitle>👍 When to use</Subtitle>

    The Input component should be used when you need to collect user input, such as:

    - Capturing personal information in registration or signup forms.
    - Implementing search functionality for filtering data.
    - Entering login credentials.
    - Allowing users to submit comments, messages, or feedback.

    <Title>Properties</Title>

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