Forms

Default Lookbook styling for a bunch of form inputs.

Labels

Sometimes, we want the bold, smaller style. Lookbook CSS tries to intelligently apply this style globally. The base case is normally sized label, as seen below. Use .label to manually apply the bolder style.

Label immediately preceeding an input

Label immediately preceeding an element containing an input

Label for a checkbox is normal

Label with .label

Text inputs

Name, placeholder

Name

Name, disabled

Name, disabled with text

Name, read only

Inline

Use as .mode-inline. Ideally used on grey backgrounds.

Input group

My group

My group with more buttons

Text area

Text Some text

Disabled Some text

Placeholder

Select

Product Delta team, January 2019

Multiple selects

Disabled select

Error state

Validation API

Want lowercase (edit field to see error styling)

Want lowercase (edit field to see error styling) Erase me

Applying `.input-invalid`

Manually applied

Some description with .input-warning

Misc

`<progress>`

Progress 50%

Progress done 100%

`<meter>`

Fuel optimum at 80/100 Fuel sub-optimal at 50/100 Fuel not very good at 30/100

checkbox

range

radio

tel

datetime-local

date

time

color

file

image

month

week

number

password

reset

button

submit

url

Content editable (fake textarea)

Content editable

Content editable with placeholder

Content editable disabled