john.doe

# Forms > Form Elements

- ##### My Income $47,171

  1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471

- ##### Site Traffic 45%

  110,150,300,130,400,240,220,310,220,300, 270, 210

- ##### Site Orders 2447

  110,150,300,130,400,240,220,310,220,300, 270, 210

# What are "Smart Form Elements?"

SmartAdmin comes with a fully customized grid system catered specifically for building form layouts. Its not technically "better" than the bootstrap 3 built in grid system, but rather more simplified for rapid form layout and faster development. Idealy you would use either the bootstrap grid or the smart-form grid, when building your form layouts. It is important not to mix elements from two seperate classes as it can cause conflict.

You can explore some of the layouts made using Smart Forms grid system or if you are not comfortable with this grid system you can simply stick to the default Bootstrap forms

## Form Grid

Responsive grid system

## Basic Form Elements

Standard Form Header
Extra Small text input
Small text input
Default text input with maxlength
Maxlength is automatically added via the "maxlength='#'" attribute
Large text input
File input
Browse
Input with autocomlete Alexandra Alice Anastasia Avelina Basilia Beatrice Cassandra Cecil Clemencia Desiderata Dionisia Edith Eleanora Elizabeth Emma Felicia Florence Galiana Grecia Helen Helewisa Idonea Isabel Joan Juliana Karla Karyn Kate Lakisha Lana Laura Leona Mandy Margaret Maria Nanacy Nicole Olga Pamela Patricia Qiana Rachel Ramona Samantha Sandra Tanya Teresa Ursula Valerie Veronica Wilma Yasmin Zelma
Note: works in Chrome, Firefox, Opera and IE10.
Select Small
Select default
Select Large
Multiple select
Note: hold down the ctrl/cmd button to select multiple options.
Textarea
Note: height of the textarea depends on the rows attribute.
Textarea resizable
Textarea expandable
Note: expands on focus.
Columned radios
Alexandra Alice Anastasia
Avelina Basilia Beatrice
Cassandra Clemencia Desiderata
Inline radios
Alexandra Alice Anastasia Avelina Beatrice
Columned checkboxes
Alexandra Alice Anastasia
Avelina Basilia Beatrice
Cassandra Clemencia Desiderata
Inline checkboxes
Alexandra Alice Anastasia Avelina Beatrice
Radio Toggles Alexandra Anastasia Avelina
Checkbox Toggles Cassandra Clemencia Desiderata
Ratings with different icons
Stars
Trophies
Asterisks
Note: you can use more than 300 vector icons for rating.

## Disabled States

Disabled States
Extra Small text input
Small text input
Default text input with maxlength
Maxlength is automatically added via the "maxlength='#'" attribute
Large text input
File input (disabled) Browse
Input with autocomlete (disabled)
Note: works in Chrome, Firefox, Opera and IE10.
Select Small (disabled)
Select Small (disabled)
Select default (disabled)
Multiple select (disabled)
Note: hold down the ctrl/cmd button to select multiple options.
Textarea (disabled)
Note: height of the textarea depends on the rows attribute.
Textarea resizable (disabled)
Textarea expandable (disabled)
Note: expands on focus.
Columned radios (disabled)
Alexandra Alice Anastasia
Inline radios (disabled)
Alexandra Alice Anastasia
Columned checkboxes (disabled)
Alexandra Alice Anastasia
Inline checkboxes (disabled)
Alexandra Alice Anastasia
Radio Toggles (disabled) Alexandra Anastasia Avelina
Checkbox Toggles (disabled) Cassandra Clemencia Desiderata

## Smart Tooltips (left)

Tooltips (with icon)
Text input with top-right tooltip Some helpful information
Text input with bottom-right tooltip Some helpful information
Text input with right tooltip Some helpful information
Textarea with top-right tooltip Some helpful information
Textarea with bottom-right tooltip Some helpful information
Textarea with right tooltip Some helpful information

## Smart Tooltips (right)

Tooltips (with icon)
Text input with top-left tooltip Some helpful information
Text input with bottom-left tooltip Some helpful information
Text input with left tooltip Some helpful information
Textarea with top-left tooltip Some helpful information
Textarea with bottom-left tooltip Some helpful information
Textarea with left tooltip Some helpful information

- Mail 14
- Calendar
- Maps
- Invoice 99
- Gallery
- My Profile