### `default`

Slot for placing the main input element (input, select, textarea, etc.). Required slot.

**Parameters:**
- `props: FieldControl` — object with data for binding the input element

### `leading`

Slot for placing content at the start of the interactive field area, before the main input element.

**Parameters:**
- `props: FieldControl` — object with data for binding

### `trailing`

Slot for placing content at the end of the interactive field area, after the main input element.

**Parameters:**
- `props: FieldControl` — object with data for binding

## FieldControl

`FieldControl` — object passed to Field component slots, containing data for proper integration of input elements.

### Type structure

```typescript
type FieldControl = {
  /** Unique element identifier for binding label and input */
  id: string

  /** CSS classes for the visible input area */
  className: string

  /** CSS classes for the hidden native input element */
  classHidden: string
}
```

### Properties

- **`id`** — unique identifier generated by the component to link `<label>` with the input element via the `for` attribute
- **`className`** — CSS classes for styling the visible input element (applied to input, textarea, select, etc.)
- **`classHidden`** — CSS classes for the hidden native input (used in custom components like Checkbox, Radio)

### Property purposes

#### `id`
Ensures accessibility and proper label functionality:
- Allows clicking on the label to focus the field
- Links descriptions with the input element for screen readers
- Generated automatically, must be used

#### `className`
Applies Field component styles to the input element:
- Ensures visual consistency
- Adds states (focus, disabled, validation)
- Integrates skeleton states

#### `classHidden`
Used for native inputs in custom components:
- Hides the original input visually
- Preserves functionality and accessibility
- Applied in Checkbox, Radio, Switch

### Usage example

```html
<script setup>
import { ref } from 'vue'

const email = ref('')
const password = ref('')
const showPassword = ref(false)
const error = ref('')

const validateEmail = (value) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(value)) {
    error.value = 'Invalid email'
  } else {
    error.value = ''
  }
}
</script>

<template>
  <div class="form">
    <!-- Simple field with search icon -->
    <Field label="Email" :validation-message="error">
      <template #leading>
        <Icon name="email" />
      </template>
      <template #default="{ id, className }">
        <input
          :id="id"
          :class="className"
          type="email"
          v-model="email"
          @blur="validateEmail(email)"
        />
      </template>
    </Field>

    <!-- Field with password visibility toggle -->
    <Field label="Password">
      <template #default="{ id, className }">
        <input
          :id="id"
          :class="className"
          :type="showPassword ? 'text' : 'password'"
          v-model="password"
        />
      </template>
      <template #trailing>
        <button
          type="button"
          @click="showPassword = !showPassword"
          aria-label="Show password"
        >
          <Icon :name="showPassword ? 'visibility_off' : 'visibility'" />
        </button>
      </template>
    </Field>

    <!-- Field with custom element -->
    <Field label="Select option">
      <template #leading>
        <Icon name="tune" />
      </template>
      <template #default="{ id, className }">
        <select :id="id" :class="className" v-model="selectedOption">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
      </template>
      <template #trailing>
        <Icon name="expand_more" />
      </template>
    </Field>
  </div>
</template>
```

In this example:
- Each field uses `id` and `className` from `FieldControl`
- `leading` slot adds icons to the left of the input
- `trailing` slot adds interactive elements to the right
- All elements are properly integrated into the Field structure
