# Label

A form label that pairs with Input, Select and the other controls, with a required marker.

Source page: https://sproutboat.com/ikada/components/label

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/label.json
```
Or from the package: `import { Label } from "@sproutboat/ikada";`
## Usage
```tsx
import { Label } from "@/components/ikada/label";

<div className="flex flex-col gap-1.5">
  <Label htmlFor="sprout">Sprout name</Label>
  <Input id="sprout" defaultValue="robin" />
</div>
```
## Examples
### Label
Pair it with a control through htmlFor and id. Inside a Field this is wired for you.
```tsx
<div className="flex flex-col gap-1.5">
  <Label htmlFor="sprout">Sprout name</Label>
  <Input id="sprout" defaultValue="robin" />
</div>
```
### Required
The asterisk is for sighted users; the control still needs required itself.
```tsx
<div className="flex flex-col gap-1.5">
  <Label htmlFor="domain" required>
    Domain
  </Label>
  <Input id="domain" required placeholder="robin.sproutboat.app" />
</div>
```
## Props
### LabelProps
Also takes every prop of `ComponentProps<"label">`.
| Prop | Type | Description |
| --- | --- | --- |
| required? | `boolean` | Shows a required marker. The control still needs `required` itself. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/label.tsx