import {
  Meta,
  Canvas,
  Story,
  ArgsTable,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { FormGroup, Input } from "../..";
import { Label } from "./Label";

<Meta title="Components/Forms/Label" component={Label} />

<ComponentHeading
  componentName="Label"
  description="Provides a text label for an input"
  sourcePath="src/components/Label/Label.tsx"
  hideDemosLink
/>

## Installation

```jsx
import { Image } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Label">
    <FormGroup>
      <Label htmlFor="name">Your email address</Label>
      <Input id="name" placeholder="Ex: support@conveyor.com" />
    </FormGroup>
  </Story>
</Canvas>

## API

Extends `HTMLLabelElement`

<ArgsTable of={Label} />