Skip to content

A few basic web-form components styled with inspiration from the Google Material design language.

Notifications You must be signed in to change notification settings

Markshall/MaterialFormComponents

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Material Form Components

A few basic web-form components styled with inspiration from the Google Material design language.

Each component has a various set of sizes (standard/medium/large) and can also use the same colour scheme as other components.

This library is wrote in Sass but the compiled CSS document is still available in this repository, as well as a minified version.

Live Preview

Features

Colours

  • Red (#f44336)
  • Green (#56da97)
  • Blue (#2196f3)
  • Orange (#ff9800)
  • Pink (#e91e63)
  • Yellow (#fdd835)
  • Brown (#795548)
  • Grey (#9e9e9e)
  • Purple (#673ab7)

Previews

Checkboxes

Unchecked

Unchecked checkboxes

Checked

Checked checkboxes

Various sizes

Checkbox sizes

Pill checkboxes

Unchecked

Unchecked pill checkboxes

Checked

Checked pill checkboxes

Various sizes

Pill checkbox sizes

Radio buttons

Unchecked

Unhecked radio button

Checked

Checked radio button

Various sizes

Radio button sizes

Select menus

Normal state

Normal state select menus

Various sizes

Select menu sizes

Labels

Normal state

Normal state labels

Various styles

Label styles

Various sizes

Label sizes

Alerts

Normal state

Normal state alerts

Various sizes

Alert sizes

Buttons

Normal state

Normal state buttons

Various sizes

Button sizes

Text fields

Normal state

Normal state text field

Focused state

Focused state text field

Various sizes

Various text field sizes

Usage

If you don't want to use a coloured component, just omit the material--x class from the class list of your element, where x is a colour name. If your element is single-lined, you add the colour to the element itself, if it contains a wrapping div, you must attach the colour to that.

Different sizes can be applied by adding medium or large to the same class list as your component colour. For example: <div class="checkbox material--red medium"> or <input type="radio" class="radio material--pink large" />

To disable an element, just add the HTML attribute disabled to the form element and it will disable the rest of the styling. It applies an alpha-transparency of 0.4 (except for pill-checkboxes as you are able to see through the toggle-button) and sets a 'not-allowed' cursor upon hover.

Checkboxes

<div class="checkbox material--red">
  <input type="checkbox" />
  <div class="checkbox-tick"></div>
</div>

Pill checkboxes

<div class="pill-checkbox material--green">
  <input type="checkbox" />
  <div class="pill-checkbox--toggle"></div>
</div>

Labels

Normal

<label class="label">Label</label>

Rounded

<label class="label rounded material--pink">Rounded</label>

Inverted

<label class="label inverted material--blue">Inverted colours</label>

Radio buttons

<input type="radio" class="radio material--blue" />

Select menus

<select class="select material--green">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Buttons

<button type="button" class="button material--brown" />

Text fields

<div class="textfield-wrapper material--orange">
  <input type="text" class="textfield" />
  <div class="textfield-bar"></div>
</div>

About

A few basic web-form components styled with inspiration from the Google Material design language.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published