Docs (wip)

Author: rawilk

docs/components/checkbox-group.md

@@ -0,0 +1,53 @@
+---
+title: Checkbox Group
+sort: 9
+---
+
+## Introduction
+
+The checkbox group allows you to quickly group related checkboxes or radio buttons together in your forms.
+This is not a replacement for the form-group component, and should be used inside of the form-group component
+in your forms.
+
+## Basic Usage
+
+The most basic usage is like this:
+
+```html
+<x-checkbox-group>
+    checkbox 1
+    checkbox 2
+</x-checkbox-group>
+```
+
+This will output:
+
+```html
+<div class="space-y-4">
+    checkbox 1
+    checkbox 2
+</div>
+```
+
+## Inline Groups
+
+By default, the `checkbox-group` is designed to stack your checkboxes and radio inputs, but you can display them inline
+with each other, by setting the `stacked` attribute to `false`. This will display the checkboxes in rows of 3 columns.
+
+```html
+<x-checkbox-group :stacked="false">
+    checkbox 1
+    checkbox 2
+</x-checkbox-group>
+```
+
+This will output:
+```html
+<div class="form-checkbox-group">
+    checkbox 1
+    checkbox 2
+</div>
+```
+
+If you want a different amount of columns for your groups, you should override the `.form-checkbox-group` class in
+your stylesheets.

docs/components/checkbox.md

@@ -0,0 +1,115 @@
+---
+title: Checkbox
+sort: 8
+---
+
+## Introduction
+
+The `checkbox` component offers an easy way to set up a checkbox input field in your forms.
+By simple setting its `name` attribute it also automatically sets your `id` attribute and makes
+sure old values are respected.
+
+## Basic Usage
+
+The most basic usage of the component exists in setting a `name` attribute:
+
+```html
+<x-checkbox name="remember_me" />
+```
+
+This will output:
+
+```html
+<div class="choice-container">
+    <div class="choice-input">
+        <input class="form-checkbox"
+               name="remember_me"
+               id="remember_me"
+               type="checkbox" 
+        />
+    </div>
+
+    <div class="choice-label">
+        <label for="remember_me"></label>
+    </div>
+</div>
+```
+
+## Labels
+
+You can easily add a label to a checkbox by using the `label` attribute, or by using the `default slot`:
+
+Via prop:
+```html
+<x-checkbox name="remember_me" label="Remember" />
+```
+
+Via slot:
+```html
+<x-checkbox name="remember_me">
+    Remember me
+</x-checkbox>
+```
+
+Both will output:
+```html
+<div class="choice-container">
+    <div class="choice-input">
+        <input class="form-checkbox"
+               name="remember_me"
+               id="remember_me"
+               type="checkbox" 
+        />
+    </div>
+
+    <div class="choice-label">
+        <label for="remember_me">Remember</label>
+    </div>
+</div>
+```
+
+## Description
+
+You can also add a description (help text) for a checkbox by either setting the `description` attribute or 
+by using the `description` slot.
+
+Via prop:
+```html
+<x-checkbox name="remember_me" label="Remember" description="Keep me logged in" />
+```
+
+```html
+<x-checkbox name="remember_me" label="Remember">
+    <x-slot name="description">Keep me logged in</x-slot>
+</x-checkbox>
+```
+
+Both will output:
+```html
+<div class="choice-container">
+    <div class="choice-input">
+        <input class="form-checkbox"
+               name="remember_me"
+               id="remember_me"
+               type="checkbox" 
+        />
+    </div>
+
+    <div class="choice-label">
+        <label for="remember_me">Remember</label>
+        
+        <p class="choice-description">Keep me logged in</p>
+    </div>
+</div>
+```
+
+## Old Values
+
+The `checkbox` component also supports checked values that were set. For example,
+you might want to apply some validation in the backend and make sure the user
+doesn't lose their input data when you show them the form again with the validation errors.
+When re-rendering the form, the `checkbox` component will remember the checked value (when not using `wire:model`):
+
+```html
+<input name="remember_me" id="remember_me" type="checkbox" checked />
+```

docs/components/email.md

@@ -0,0 +1,31 @@
+---
+title: Email
+sort: 4
+---
+
+## Introduction
+
+The `email` component offers an easy way to set up an email input field for your
+forms. By simply setting its `name` attribute it also automatically sets your `id`
+and makes sure old values are respected.
+
+## Basic Usage
+
+The most basic usage of the component is like this:
+
+```html
+<x-email name="email" />
+```
+
+This will output:
+
+```html
+<div class="form-text-container">
+    <input class="form-input form-text" name="email" id="email" type="email" />
+</div>
+```
+
+By default an `email` type will be set for the input field as well as an `id` that allows it to be
+easily referenced by a `label` element.
+
+Besides this, the email element behaves exactly the same as the [input component](/docs/laravel-form-components/v1/components/input).

docs/components/form-error.md

@@ -0,0 +1,84 @@
+---
+title: Form Error
+sort: 11
+---
+
+## Introduction
+
+The `form-error` component provides an easy way to work with Laravel's `$error` message bag
+in its Blade views. You can use it to display error messages for form fields.
+
+This isn't a component you will usually reach for, as in most cases you will probably
+want to use the `form-group` component to render the label and errors automatically
+for you, but this component is available to use for other use cases you may have.
+
+## Basic Usage
+
+Imagine we have the following validation error:
+
+```php
+['first_name' => 'Incorrect first name.']
+```
+
+The most basic usage of the `form-error` component exists in using it as a self-closing component
+using a `name` attribute:
+
+```html
+<x-form-error name="first_name" />
+```
+
+This will output:
+
+```html
+<p class="form-error" id="first_name-error">
+    Incorrect first name.
+</p>
+```
+
+As you can see it'll pick the error message from the `$error` message bag and
+render it in the view. If the message isn't set, the HTML isn't rendered.
+
+It also sets the input id automatically from the `name` attribute, but you can easily override it by
+setting the `input-id` attribute to the relevant input's id. The input id is used in the `id` attribute,
+which can be referenced by an `aria-describedby` attribute on your input element.
+
+## Composing The Content
+
+You can also opt to composing how the rendered content looks too. This allows you to make use of hte component's
+`messages()` method to render multiple validation errors at the same time.
+
+Let's assume we have the following validation errors:
+
+```php
+[
+    'first_name' => [
+        'Incorrect first name.',
+        'Needs at least 5 characters.',
+    ]
+]
+```
+
+Now we'll use the component's slot and its `messages()` method to render an unordered list of the errors:
+
+```html
+<x-form-error tag="ul" name="first_name">
+    @foreach ($component->messages($errors) as $error)
+        <li>{{ $error }}</li>
+    @endforeach
+</x-form-error>
+```
+
+We also specified the `tag` attribute to change the element tag from the default `p` tag to a `ul` tag.
+
+This will output:
+
+```html
+<ul class="form-error" id="first_name-error">
+    <li>Incorrect first name.</li>
+    <li>Needs at least 5 characters.</li>
+</ul>
+```
+
+As you can see we need to pass in the `$errors` message bag to the `messages()`
+method of the component to grab all the messages for our field. Then we loop over
+them and render them.