@extends('layouts.master') @section('title') @lang('translation.Form_Elements') @endsection @section('content') @component('components.breadcrumb') @slot('li_1') Forms @endslot @slot('title') Form Elements @endslot @endcomponent

Textual inputs

Here are examples of .form-control applied to each textual HTML5 <input> type.

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

Range Inputs

Create custom <input type="range"> controls with .form-range.

Min and max

Range inputs have implicit values for min and max—0 and 100, respectively.

Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step value.

Checkboxes

Form Checkboxes
Form Checkboxes Right
Form Checkboxes colors

Add class .form-check-* for a color Checkboxes

Form Checkboxes Outline

Add class .form-checkbox-outline & .form-check-* for a color Checkboxes

Radios

Form Radios
Form Radios Right
Form Radio colors

Add class .form-radio-* for a color Radios

Form Radio Outline

Add class form-radio-outline & .form-radio-* for a color Checkboxes

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.

Switch examples
Switch sizes

File browser

Default file input
Custom file input
@endsection