<x-bui/>
NPM GitHub
On this page

# Form 

<!-- Default method="post" -->
<x-form></x-form>

<!-- Two ways to set method="get" -->
<x-form method="get"></x-form>
<x-form get></x-form>

<!-- Two ways to set method="post" -->
<x-form method="post"></x-form>
<x-form post></x-form>

<!-- With file -->
<x-form file="true"></x-form>
<x-form file></x-form>

Output:

<form method="post"></form>
<form method="get"></form>
<form method="get"></form>
<form method="post"></form>
<form method="post"></form>
<form method="post" enctype="multipart/form-data"></form>
<form method="post" enctype="multipart/form-data"></form>

# Input 

<!-- Only `id` or `name` is required -->
<x-form.input name="name"></x-form.input>

# Prop size 

<!-- Two ways to set size -->
<x-form.input name="name" size="sm"></x-form.input>
<x-form.input name="name" size="lg"></x-form.input>
<x-form.input name="name" sm></x-form.input>
<x-form.input name="name" lg></x-form.input>

# Prop label and help 

<x-form.input type="email" name="email" label="Email address" help="We'll never share your email with anyone else."></x-form.input>
We'll never share your email with anyone else.

# Label and help component

Sometimes the HTML structure of label, input and help is different, for example using form layouts . In this case you can use label and help component. 

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <x-form.label for="password" override:class="col-form-label">Password</x-form.label>
  </div>
  <div class="col-auto">
    <!-- aria-describedby in this case is required and must end with "-help" -->
    <x-form.input type="password" name="password" aria-describedby="password-help"></x-form.input>
  </div>
  <div class="col-auto">
    <!-- "id" in this case is required and must NOT end with "-help" -->
    <x-form.help id="password" inline>Must be 8-20 characters long.</x-form.help>
  </div>
</div>
Must be 8-20 characters long.

# Input group

Some inputs like checkbox, radios and switches require a wrapper and by default it can be used to add margin bottom. See the default example below. 

<x-form.group>
  <x-form.input name="name"></x-form.input>
</x-form.group>

# With label and help

We can set the props with aware once in the x-form.group component like id or name and then we don't need to set most of the others props. 

<x-form.group aware:name="fullname">
  <x-form.label>First and last name</x-form.label>
  <!-- aria-describedby in this case is required since the input component will add it only when you set the help text via prop `help` -->
  <x-form.input aria-describedby="fullname-help"></x-form.input>
  <x-form.help>Please provide your first and last name</x-form.help>
</x-form.group>
Please provide your first and last name

# Form layouts

The x-form.group component can be used also to create form layouts of previous example, and pass props to label, input and help via aware. In below example we are setting prop id once with aware , then we don't need to set the for in label, nor the id or name and aria-describedby in input and also the id in help component. 

<x-form.group aware:id="password" class="row g-3 align-items-center">
  <div class="col-auto">
    <x-form.label override:class="col-form-label">Password</x-form.label>
  </div>
  <div class="col-auto">
    <x-form.input type="password"></x-form.input>
  </div>
  <div class="col-auto">
    <x-form.help inline>Must be 8-20 characters long.</x-form.help>
  </div>
</x-form.group>
Must be 8-20 characters long.

In next sections we will see more examples of features offered by this component.

# Floating label

Floating label must have prop id or name set in x-form.group component and must be aware for pass down the id to the input, for avoiding to set it twice. A placeholder is required on x-form.input according to Bootstrap docs as the method of CSS-only floating labels uses the :placeholder-shown pseudo-element. 

<x-form.group aware:id="floating-input" label="Floating" floating>
  <x-form.input placeholder="Floating"></x-form.input>
</x-form.group>

<!-- When using the label component it must be after the input, according to Bootstrap docs -->
<x-form.group aware:id="floating-input" floating>
  <x-form.input placeholder="Floating"></x-form.input>
  <x-form.label>Floating with label</x-form.label>
</x-form.group>

# Select 

<!-- Only `id` or `name` is required -->
<x-form.select name="name" label="Make your choice">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</x-form.select>

<!-- Pass options via prop "options", set selected via prop "selected" and default option via prop "defaultOption" -->
<x-form.select name="name" label="Make your choice" defaultOption="Select an option" selected="2" options="Pass valid JSON object with value: label"></x-form.select>

# Checks, radios and switches

The props check and switch can be set also via prop type="check" or type="switch" . 

<x-form.group check>
  <x-form.input type="checkbox" id="checkbox" label="Default checkbox"></x-form.input>
</x-form.group>

<!-- For the same radios set the same `name` but different `id` -->
<x-form.group check>
  <x-form.input type="radio" name="radio" id="radio1" label="Default radio"></x-form.input>
</x-form.group>
<x-form.group check>
  <x-form.input type="radio" name="radio" id="radio2" label="Default radio"></x-form.input>
</x-form.group>

<x-form.group switch>
  <x-form.input type="checkbox" id="switch" label="Default switch" role="switch"></x-form.input>
</x-form.group>