Forms

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    name="email1"
    type="email"
    placeholder="Enter email"
    required
    :label="[
      'text' => 'Email Address',
    ]"
    help="We'll never share your email with anyone else."
  />

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    type="password"
    placeholder="Password"
    required
    :label="[
        'text' => 'Password',
    ]"
  />

  <x-checkbox
    :group="[
      'class' => 'mb-3',
    ]"
    name="checkobox1"
    :label="[
        'text' => 'Check me out',
    ]"
  />

  <x-select
    :group="[
      'class' => 'mb-3',
    ]"
    name="select4"
    :label="[
        'text' => 'Example select',
    ]"
    :options="[1,2,3,4]"
  />

  <x-textarea
    :group="[
      'class' => 'mb-3',
    ]"
    name="textarea1"
    rows="3"
    :label="[
        'text' => 'Example textarea',
    ]"
  />

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    name="exmple6"
    class="form-control-lg"
    placeholder=".form-control-lg"
  />

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    name="exmple7"
    placeholder=".form-control (default)"
  />

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    name="exmple8"
    class="form-control-sm"
    placeholder=".form-control-sm"
  />

  <x-select
    :group="[
      'class' => 'mb-3',
    ]"
    name="exmple9"
    class="form-select-lg"
    :options="['.form-control-lg']"
  />

  <x-select
    :group="[
      'class' => 'mb-3',
    ]"
    name="exmple10"
    :options="['.form-select (default)']"
  />

  <x-select
    :group="[
      'class' => 'mb-3',
    ]"
    name="exmple11"
    class="form-select-sm"
    :options="['.form-control-sm']"
  />

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    class="form-control-sm"
    name="email12"
    type="email"
    placeholder=".form-control-sm"
    required
    :label="[
      'text' => 'Email Address',
    ]"
    :grid="['col-sm-3 col-form-label-sm', 'col-sm-9']"
  />

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    name="email13"
    type="email"
    placeholder="default"
    required
    :label="[
      'text' => 'Email Address',
    ]"
    :grid="['col-sm-3', 'col-sm-9']"
  />

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    class="form-control-lg"
    name="email14"
    type="email"
    placeholder=".form-control-lg"
    required
    :label="[
      'text' => 'Email Address',
    ]"
    :grid="['col-sm-3 col-form-label-lg', 'col-sm-9']"
  />

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    name="exmple15"
    placeholder="Readonly input here..."
    readonly
  />

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    class="form-control-plaintext"
    name="exmple16"
    :label="[
      'text' => 'Email Address',
    ]"
    placeholder="Readonly input here..."
    readonly
    :grid="['col-sm-3', 'col-sm-9']"
  />

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    name="password17"
    type="password"
    :label="[
      'text' => 'Password',
    ]"
    placeholder="Password"
    readonly
    :grid="['col-sm-3', 'col-sm-9']"
  />

  <x-input
    name="example18"
    :group="[
      'class' => 'mb-3',
    ]"
    :label="[
      'text' => 'Example label',
    ]"
    placeholder="Example input"
  />

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    name="example19"
    :label="[
      'text' => 'Another label',
    ]"
    placeholder="Another input"
  />

  <div class="row">
    <div class="col">
      <x-input
        :group="[
          'class' => 'mb-3',
        ]"
        name="example20"
        :label="[
          'text' => 'Example label',
        ]"
        placeholder="Example input"
      />
    </div>

    <div class="col">
      <x-input
        :group="[
          'class' => 'mb-3',
        ]"
        name="example21"
        :label="[
          'text' => 'Another label',
        ]"
        placeholder="Another input"
      />
    </div>
  </div>

  <div class="row">
    <div class="col">
      <x-input
        :group="[
          'class' => 'mb-3',
        ]"
        name="example22"
        :label="[
          'text' => 'Example label',
        ]"
        placeholder="Example input"
      />
    </div>

    <div class="col">
      <x-input
        :group="[
          'class' => 'mb-3',
        ]"
        name="example23"
        :label="[
          'text' => 'Another label',
        ]"
        placeholder="Another input"
      />
    </div>
  </div>

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    name="email24"
    type="email"
    :label="[
      'text' => 'Email address',
    ]"
    placeholder="Enter email"
    :grid="['col-sm-3', 'col-sm-9']"
    help="We'll never share your email with anyone else."
  />

  <x-input
    :group="[
      'class' => 'mb-3',
    ]"
    name="password25"
    type="password"
    :label="[
      'text' => 'Password',
    ]"
    placeholder="Password"
    :grid="['col-sm-3', 'col-sm-9']"
  />

  <x-checkbox
    :group="[
      'class' => 'mb-1',
    ]"
    name="checkmeout26"
    :label="[
      'text' => 'Check me out',
    ]"
    :grid="['offset-sm-3 col-sm-9']"
  />

  <x-switches
    :group="[
      'class' => 'mb-1',
    ]"
    name="switch"
    :label="[
      'text' => 'Toggle this switch element',
    ]"
    :grid="['offset-sm-3 col-sm-9']"
  />

  <x-radio
    :group="[
      'class' => 'mb-1',
    ]"
    name="radio1"
    id="customRadioInline1"
    :label="[
      'text' => 'Toggle this custom radio',
    ]"
    :grid="['offset-sm-3 col-sm-9']"
  />

  <x-radio
    :group="[
      'class' => 'mb-3',
    ]"
    name="radio1"
    id="customRadioInline2"
    :label="[
      'text' => 'Or toggle this custom radio',
    ]"
    :grid="['offset-sm-3 col-sm-9']"
  />

  <x-select
    :group="[
      'class' => 'mb-3',
    ]"
    name="multipleSelect27"
    :options="[1,2,3,4]"
    :label="[
      'text' => 'Example select',
    ]"
    :grid="['col-sm-3', 'col-sm-9']"
  />

  <x-select
    :group="[
      'class' => 'mb-3',
    ]"
    name="multipleSelect28"
    multiple
    :options="[1,2,3,4]"
    :label="[
      'text' => 'Example multiple select',
    ]"
    :grid="['col-sm-3', 'col-sm-9']"
  />

  <x-input
    class="form-control-color"
    type="color"
    name="upload"
    :label="[
      'text' => 'Choose your color',
    ]"
  />

  <x-upload
    class="mb-3"
    type="file"
    name="upload"
    :label="[
      'text' => 'File upload',
    ]"
  />