import { Canvas, Controls, Meta, Source, Story } from "@storybook/blocks";

import * as InputStories from "./input.stories.tsx";

<Meta of={InputStories} />

# Input & Text Area

Use this component to display an `<input>` or `<textarea>` element.

## Uncontrolled Component Demo

<Canvas style={{ background: "#1F1A23" }}>
  <Story id="input-text-area--uncontrolled" />
</Canvas>

## Usage

Set the `multiline` prop to true or false to show an `<input>` or `<textarea>` respectively.

### type="number"

When rendering an `<input>` with `type="number"` it is advised to implement one of the following:

- Set `raisedLabel` to `true`. This will prevent the label from falling into the input when an invalid number is inputted such as `e123`.
  - Consider setting `raisedLabel` to `true` as soon as the `onInput` callback has fired for best UX.
- Use `clearScientificNotation` prop to block possibility of inputting invalid numbers by rejecting e-notation numbers and `+` from being inputted.
It will also clear the value of the input on blur whenever the value is invalid. This will prevent the input from drawing the label over the value.

Which ones to implement will highly depend on the use case.

## Props

<Controls />