# Plugin voor formulieren

`@tailwindcss/forms` is een 1:1-port van de officiële formulierenplugin van PHP. De plugin biedt een uitgesproken reset voor formulierelementen — tekstvelden, tekstgebieden, selectievakken, selectievakjes en radioknoppen — en brengt ze op een consistente basis (reset van de weergave, rand, opvulling, focusring, aangepaste chevron voor selectievakken en pictogrammen voor selectievakjes en radioknoppen), die je vervolgens met hulpprogramma's kunt overschrijven.

## Gebruik

Laad de plugin met `@plugin` en importeer de utilitieslaag:

```php
use TailwindPHP\tw;

$css = tw::generate(
    '<input class="form-input"><select class="form-select"></select>',
    '@plugin "@tailwindcss/forms"; @import "tailwindcss/utilities.css";'
);
```

## Strategie

De optie `strategy` bepaalt hoe stijlen worden toegepast:

| Strategie | Gedrag |
|----------|----------|
| `base` | Stijlt native formulierelementen globaal met selectors zoals `[type='text']`, `textarea` en `select`. |
| `class` | Stijlt alleen de expliciete klassen `form-*`; elementen zonder klasse blijven ongemoeid. |

Als `strategy` wordt weggelaten, worden **beide** strategieën toegepast — native elementen krijgen de basisreset en de klassen `form-*` zijn ook beschikbaar. Stel één strategie in om de andere uit te schakelen:

```css
@plugin "@tailwindcss/forms" {
    strategy: "class";
}
```

## Klassenstrategie

Pas bij de strategie `class` (of de standaardstrategie) deze klassen expliciet toe op de elementen die je wilt stijlen:

| Klasse | Element |
|-------|---------|
| `form-input` | Tekstachtige invoervelden |
| `form-textarea` | `<textarea>` |
| `form-select` | `<select>` |
| `form-multiselect` | `<select multiple>` |
| `form-checkbox` | `<input type="checkbox">` |
| `form-radio` | `<input type="radio">` |

```php
$css = tw::generate(
    '
        <input class="form-input">
        <textarea class="form-textarea"></textarea>
        <select class="form-select"></select>
        <select class="form-multiselect" multiple></select>
        <input type="checkbox" class="form-checkbox">
        <input type="radio" class="form-radio">
    ',
    '
        @plugin "@tailwindcss/forms" {
            strategy: "class";
        }
        @import "tailwindcss/utilities.css";
    '
);
```

Elke klasse herstelt de weergave van het besturingselement en stelt randen, opvulling en een focusring in; `form-select` voegt een chevron als achtergrondafbeelding toe en `form-checkbox`/`form-radio` voegen pictogrammen voor aangevinkte statussen toe. Overschrijf dit naar wens met gewone utilities (bijvoorbeeld `class="form-input rounded-lg border-gray-300"`).

Zie [Plugins](https://tailwindphp.inline0.dev/nl/docs/plugins) voor de directive `@plugin` en informatie over het laden.