# FormField

A form field wrapper component that provides consistent layout for form inputs with labels, error messages, and required indicators.

## Features

- **Label Support**: Display labels with optional suffix
- **Required Indicator**: Visual indicator for required fields
- **Error Display**: Show validation error messages
- **Flexible Layout**: Center or top label alignment
- **Custom Styling**: Custom styles for label and container
- **Responsive Height**: Adjustable field height

## Installation

```bash
npm install @ticatec/uniface-element
```

```typescript
import FormField from '@ticatec/uniface-element/FormField';
```

## Basic Usage

```svelte
<script>
  import FormField from '@ticatec/uniface-element/FormField';
  import TextEditor from '@ticatec/uniface-element/TextEditor';
</script>

<FormField label="Username" required>
  <TextEditor placeholder="Enter username" />
</FormField>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | `'Label:'` | Field label text |
| `labelSuffix` | `string` | `':'` | Suffix text after label |
| `required` | `boolean` | `false` | Show required indicator (*) |
| `error` | `string \| null` | `null` | Error message to display |
| `labelAlignment` | `'center' \| 'top'` | `'center'` | Label vertical alignment |
| `labelStyle` | `string \| null` | `null` | Custom CSS for label |
| `style` | `string` | `''` | Custom CSS for container |
| `height` | `string` | `'auto'` | Height of the field area |
| `class` | `string` | `''` | CSS class name |

## Examples

### Basic Form Field

```svelte
<script>
  import FormField from '@ticatec/uniface-element/FormField';
  import TextEditor from '@ticatec/uniface-element/TextEditor';
</script>

<FormField label="Email">
  <TextEditor type="email" placeholder="user@example.com" />
</FormField>
```

### Required Field

```svelte
<script>
  import FormField from '@ticatec/uniface-element/FormField';
  import TextEditor from '@ticatec/uniface-element/TextEditor';
</script>

<FormField label="Password" required>
  <TextEditor type="password" placeholder="Enter password" />
</FormField>
```

### With Error Message

```svelte
<script>
  import FormField from '@ticatec/uniface-element/FormField';
  import TextEditor from '@ticatec/uniface-element/TextEditor';

  let error = 'This field is required';
</script>

<FormField label="Username" {error} required>
  <TextEditor placeholder="Enter username" />
</FormField>
```

### Top Label Alignment

```svelte
<script>
  import FormField from '@ticatec/uniface-element/FormField';
  import TextEditor from '@ticatec/uniface-element/TextEditor';
</script>

<FormField label="Description" labelAlignment="top">
  <TextEditor placeholder="Enter description" />
</FormField>
```

### Custom Label Style

```svelte
<script>
  import FormField from '@ticatec/uniface-element/FormField';
  import TextEditor from '@ticatec/uniface-element/TextEditor';
</script>

<FormField
  label="Important Field"
  labelStyle="color: #007acc; font-weight: bold;"
>
  <TextEditor placeholder="Enter value" />
</FormField>
```

### Complete Form Example

```svelte
<script>
  import FormField from '@ticatec/uniface-element/FormField';
  import TextEditor from '@ticatec/uniface-element/TextEditor';
  import Button from '@ticatec/uniface-element/Button';

  let formData = {
    username: '',
    email: '',
    password: ''
  };

  let errors = {
    username: '',
    email: '',
    password: ''
  };

  function validate() {
    if (!formData.username) {
      errors.username = 'Username is required';
    }
    if (!formData.email) {
      errors.email = 'Email is required';
    }
    if (!formData.password) {
      errors.password = 'Password is required';
    }
  }

  function handleSubmit() {
    validate();
    if (Object.values(errors).every(e => !e)) {
      console.log('Form submitted:', formData);
    }
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <FormField label="Username" required error={errors.username}>
    <TextEditor bind:value={formData.username} placeholder="Enter username" />
  </FormField>

  <FormField label="Email" required error={errors.email}>
    <TextEditor bind:value={formData.email} type="email" placeholder="user@example.com" />
  </FormField>

  <FormField label="Password" required error={errors.password}>
    <TextEditor bind:value={formData.password} type="password" placeholder="Enter password" />
  </FormField>

  <Button type="primary" onclick={handleSubmit}>Submit</Button>
</form>
```

## Best Practices

1. **Always use labels**: Provide clear, descriptive labels for accessibility
2. **Mark required fields**: Use the `required` prop for mandatory fields
3. **Show errors**: Display validation errors below the field
4. **Consistent alignment**: Use the same label alignment throughout a form
5. **Custom styling**: Use labelStyle for special emphasis when needed

## Accessibility

- Proper label association with form fields
- Required indicator for screen readers
- Error message display for validation feedback
- Semantic HTML structure