mishka_chelekom

# Form Wrapper Component

Styled form container with consistent layout, spacing, and action slots.

**Documentation**: https://mishka.tools/chelekom/docs/forms

> **For LLM Agents**: If you need more details, examples, or edge cases not covered here, fetch the full documentation from the URL above.

## Generate

```bash
mix mishka.ui.gen.component form_wrapper
mix mishka.ui.gen.component form_wrapper --variant default,outline --color white,natural
mix mishka.ui.gen.component form_wrapper --module MyAppWeb.Components.CustomFormWrapper
```

## Dependencies

None (necessary, optional, or JavaScript).

## Component Types

| Component | Description |
|-----------|-------------|
| `form_wrapper/1` | Styled form container |
| `simple_form/1` | Simple form with Phoenix integration |

## `form_wrapper/1` Attributes

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `id` | `:string` | `nil` | Unique identifier |
| `variant` | `:string` | `"base"` | Style variant |
| `color` | `:string` | `"base"` | Color theme |
| `size` | `:string` | `"medium"` | Form size |
| `space` | `:string` | `"medium"` | Space between elements |
| `padding` | `:string` | `"medium"` | Content padding |
| `rounded` | `:string` | `"medium"` | Border radius |
| `class` | `:any` | `nil` | Custom CSS class |

## Slots

| Slot | Description |
|------|-------------|
| `inner_block` | Form fields and content |
| `actions` | Form action buttons (submit, cancel, etc.) |

## Available Options

| Option | Values |
|--------|--------|
| Variants | `base`, `default`, `outline`, `transparent`, `shadow`, `unbordered` |
| Colors | `base`, `white`, `primary`, `secondary`, `dark`, `success`, `warning`, `danger`, `info`, `light`, `misc`, `dawn`, `silver` |
| Sizes | `extra_small`, `small`, `medium`, `large`, `extra_large` |
| Space / Padding | `extra_small`, `small`, `medium`, `large`, `extra_large` |
| Rounded | `extra_small`, `small`, `medium`, `large`, `extra_large`, `none` |

## Usage Examples

### Basic Form Wrapper (standalone or with `@form`)

```heex
<.form_wrapper>
  <.text_field name="name" label="Name" />
  <.email_field name="email" label="Email" />

  <:actions>
    <.button type="submit" color="primary">Submit</.button>
  </:actions>
</.form_wrapper>
```

```heex
<.form for={@form} phx-submit="save">
  <.form_wrapper variant="default" color="white" padding="large">
    <.text_field field={@form[:name]} label="Name" />
    <.email_field field={@form[:email]} label="Email" />
    <.password_field field={@form[:password]} label="Password" />

    <:actions>
      <.button type="submit" color="primary">Create Account</.button>
    </:actions>
  </.form_wrapper>
</.form>
```

### Different Variants

```heex
<.form_wrapper variant="default" color="white">Default variant</.form_wrapper>
<.form_wrapper variant="outline" color="primary">Outline variant</.form_wrapper>
<.form_wrapper variant="shadow" color="white">Shadow variant</.form_wrapper>
```

### With Actions Row

```heex
<.form_wrapper padding="large" space="large">
  <.text_field name="title" label="Title" />
  <.textarea_field name="description" label="Description" />

  <:actions>
    <div class="flex gap-4">
      <.button type="button" variant="outline">Cancel</.button>
      <.button type="submit" color="primary">Save</.button>
    </div>
  </:actions>
</.form_wrapper>
```

### Styled Login Form

```heex
<.form for={@form} phx-submit="login">
  <.form_wrapper
    variant="shadow"
    color="white"
    padding="extra_large"
    rounded="large"
    class="max-w-md mx-auto"
  >
    <h2 class="text-2xl font-bold text-center mb-6">Welcome Back</h2>

    <.email_field field={@form[:email]} label="Email" placeholder="you@example.com" />
    <.password_field field={@form[:password]} label="Password" />

    <div class="flex items-center justify-between">
      <.checkbox_field name="remember" label="Remember me" />
      <a href="/forgot-password" class="text-sm text-primary-500">Forgot password?</a>
    </div>

    <:actions>
      <.button type="submit" color="primary" full_width>Sign In</.button>
    </:actions>

    <p class="text-center text-sm text-gray-500 mt-4">
      Don't have an account? <a href="/register" class="text-primary-500">Sign up</a>
    </p>
  </.form_wrapper>
</.form>
```

## Common Patterns

### Registration Form (grid layout, `full_width`/`size` on button)

```heex
<.form for={@form} phx-submit="register" phx-change="validate">
  <.form_wrapper variant="outline" color="natural" padding="large" rounded="large">
    <div class="grid grid-cols-2 gap-4">
      <.text_field field={@form[:first_name]} label="First Name" />
      <.text_field field={@form[:last_name]} label="Last Name" />
    </div>

    <.email_field field={@form[:email]} label="Email" />
    <.password_field field={@form[:password]} label="Password" />
    <.password_field field={@form[:password_confirmation]} label="Confirm Password" />
    <.checkbox_field name="terms" label="I agree to the Terms of Service" />

    <:actions>
      <.button type="submit" color="primary" full_width size="large">Create Account</.button>
    </:actions>
  </.form_wrapper>
</.form>
```

### Contact Form (icon button in actions)

```heex
<.form for={@form} phx-submit="send_message">
  <.form_wrapper variant="default" padding="large" space="medium">
    <div class="grid grid-cols-2 gap-4">
      <.text_field field={@form[:name]} label="Name" />
      <.email_field field={@form[:email]} label="Email" />
    </div>

    <.text_field field={@form[:subject]} label="Subject" />
    <.textarea_field field={@form[:message]} label="Message" rows={5} />

    <:actions>
      <.button type="submit" color="primary" icon="hero-paper-airplane">Send Message</.button>
    </:actions>
  </.form_wrapper>
</.form>
```

### Settings Form (grouped with `fieldset`, `padding="none"`)

```heex
<.form for={@form} phx-submit="save_settings">
  <.form_wrapper variant="transparent" padding="none" space="large">
    <.fieldset legend="Profile" variant="outline">
      <:control>
        <.text_field field={@form[:username]} label="Username" />
        <.email_field field={@form[:email]} label="Email" />
        <.textarea_field field={@form[:bio]} label="Bio" />
      </:control>
    </.fieldset>

    <.fieldset legend="Notifications" variant="outline">
      <:control>
        <.checkbox_field name="email_updates" label="Email updates" />
        <.checkbox_field name="marketing" label="Marketing emails" />
      </:control>
    </.fieldset>

    <:actions>
      <.button type="submit" color="primary">Save Changes</.button>
    </:actions>
  </.form_wrapper>
</.form>
```