# Form Control

> Label, helper text, and error slot that wraps form inputs and wires up `aria-describedby`/`aria-invalid`.

- Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular`
- Docs: https://sisyphosui.com/docs/components/form-control

## Installation

Pick the framework binding that matches your stack:

```bash
pnpm add @sisyphos-ui/react   # React 18+
pnpm add @sisyphos-ui/vue     # Vue 3+
pnpm add @sisyphos-ui/angular # Angular 17+
```

## Import

```tsx
import "@sisyphos-ui/react/styles.css";
import { FormControl } from "@sisyphos-ui/react";
```

## Framework usage

### React 18+

```tsx
import { FormControl, FormLabel, FormHelperText, Input } from "@sisyphos-ui/react";

export const Field = () => (
  <FormControl>
    <FormLabel>Email</FormLabel>
    <Input type="email" />
    <FormHelperText>We'll never share your email.</FormHelperText>
  </FormControl>
);
```

### Vue 3+

```vue
<script setup lang="ts">
import { FormControl, FormLabel, FormHelperText, Input } from "@sisyphos-ui/vue";
</script>

<template>
  <FormControl>
    <FormLabel>Email</FormLabel>
    <Input type="email" />
    <FormHelperText>We'll never share your email.</FormHelperText>
  </FormControl>
</template>
```

### Angular 17+

```ts
import { Component } from "@angular/core";
import { FormControl, FormLabel, FormHelperText, Input } from "@sisyphos-ui/angular";

@Component({
  selector: "app-field",
  standalone: true,
  imports: [FormControl, FormLabel, FormHelperText, Input],
  template: `
    <sui-form-control>
      <sui-form-label>Email</sui-form-label>
      <sui-input type="email" />
      <sui-form-helper-text>We'll never share your email.</sui-form-helper-text>
    </sui-form-control>
  `,
})
export class FieldComponent {}
```

## Examples

### Default

Wires `id`/`aria-*` between label, input, and helper/error text.

```tsx
import { FormControl, FormLabel, FormHelperText, FormErrorText, Input } from "@sisyphos-ui/react";

export function Example() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <FormControl required>
        <FormLabel>Email</FormLabel>
        <Input placeholder="you@company.com" variant="outlined" fullWidth />
        <FormHelperText>We'll never share your email.</FormHelperText>
      </FormControl>

      <FormControl error>
        <FormLabel>Password</FormLabel>
        <Input type="password" variant="outlined" fullWidth />
        <FormErrorText>Password must be at least 12 characters.</FormErrorText>
      </FormControl>
    </div>
  );
}
```

<!-- exports: { "FormControl": "@sisyphos-ui/react" } -->