Standard
Form:
A form is a collection of user input elements, and has no stylings of its own.
Let's go ahead and get you signed up.
This example uses a ui segment to add the padding and background color. This is not required.
Types of Content
Field
A field is a form element containing a label and an input
Text Area
A textarea uses the default form element
Checkbox
Checkboxes are styled forms of standard form checkboxes.
Validation
Text blocks have special meaning inside a form tag. All message blocks are hidden by default.
- Please enter your first name
- Please enter your last name
States
Form
Loading
If a form is in loading state, it will automatically show a loading indicator:
Error
If a form is in an error state, it will automatically show any error message blocks:
You can only sign up for an account once with a given e-mail address.
Warning
If a form is in warning state, it will automatically show any warning message block:
- You forgot your first name
- And also your last name
Form Fields
Error
Individual fields may contain an error state
Disabled
Individual fields may be disabled or read only
Variations
Forms
Fluid
A form can take the width of its container
Size
A form can also be small or large
Inverted
A form on a dark background may have to invert its color scheme
- Please enter your first name
- Please enter your last name
Fields
Inline
A field can have its label next to instead of above it.
Date
A field can let users know they are for dates
Groups
Field Groups
Fields can exist side by side to show relation