Morningstar Design System v1.3.1

Input

Input Hover

Input Focus

Input Disabled

Input Error

Input With Placeholder

Input With Too Much Placeholder

Input With Too Much Content

Textarea

Textarea Hover

Textarea Focus

Textarea Disabled

Textarea Error

Textarea With Placeholder

Textarea With Too Much Placeholder

Textarea With Too Much Content

Label

First Name

Label Required

First Name* Required Field.

Label Optional

First Name (Optional)

Label, Too Much Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet deleniti quos molestiae placeat eaque in sunt corporis vel excepturi assumenda odit est rerum, debitis similique impedit alias quas ab. Cumque?

Label, Required Too Much Content

Label, Optional Too Much Content

Checkbox

I accept the terms and conditions

Checkbox Hover

I accept the terms and conditions

Checkbox Focus

I accept the terms and conditions

Checkbox Active

I accept the terms and conditions

Checkbox Disabled

I accept the terms and conditions

Checked Checkbox

Checked checkbox

Checked Checkbox, Hover

Checked checkbox

Checked Checkbox, Active

Checked checkbox

Indeterminate Checkbox

Indeterminate checkbox

Indeterminate Checkbox, Hover

Indeterminate checkbox

Indeterminate Checkbox, Active

Indeterminate checkbox

Checkbox Error

I accept the terms and conditions

Checkbox Too Little Content

Checkbox Too Much Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dolorum qui, eius nisi sint fugiat dolorem eaque libero quasi numquam blanditiis consequatur vero ipsum maxime. Illo quasi quas, iste labore. Quasi ut voluptatum vitae voluptates, sunt distinctio ullam repellendus maxime. Aperiam fuga suscipit sed eveniet, eligendi. Commodi, adipisci alias cum velit molestiae rerum eos omnis. Molestiae culpa tempore eligendi doloribus.

Checkbox Group Stacked

Select all the days that apply Mondays Tuesdays Wednesdays Thursdays Fridays

Checkbox Group Stacked Too Much Content

Select all the days that apply Mondays Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ut aliquid tenetur sequi pariatur rem expedita similique, rerum, corrupti assumenda alias adipisci distinctio. Harum neque autem a, quisquam in architecto aspernatur iure tenetur, asperiores voluptatibus obcaecati cum magni ipsum repudiandae hic reprehenderit pariatur, assumenda ex excepturi, velit consectetur. Labore, molestias error, cupiditate autem ea hic tenetur quisquam. Wednesdays Thursdays Fridays

Checkbox Group Horizontal

Select at least one color* Required Field. Red Orange Yellow

Checkbox Group Horizontal Too Much Content

Select at least one color* Required Field. Red Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ut aliquid tenetur sequi pariatur rem expedita similique, rerum, corrupti assumenda alias adipisci distinctio. Harum neque autem a, quisquam in architecto aspernatur iure tenetur, asperiores voluptatibus obcaecati cum magni ipsum repudiandae hic reprehenderit pariatur, assumenda ex excepturi, velit consectetur. Labore, molestias error, cupiditate autem ea hic tenetur quisquam. Yellow Orange

Radio Button

Choose this one

Radio Button Hover

Choose this one

Radio Button Focus

Choose this one

Radio Button Disabled

Choose this one

Radio Button Error

Choose this one

Radio Button Checked

Choose this one

Radio Button Checked, Hover

Choose this one

Radio Button Checked, Active

Choose this one

Radio Button, Too Little Content

Radio Button, Too Much Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quidem, odit eveniet distinctio aperiam blanditiis error sit at dicta quod laborum eum. Beatae consequuntur fugit culpa, architecto soluta, eum vitae.

Radio Group Stacked

Select a the day that works best for you Mondays Tuesdays Wednesdays Thursdays Fridays

Radio Group Stacked Too Much Content

Select a the day that works best for you Mondays Tuesdays Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ut aliquid tenetur sequi pariatur rem expedita similique, rerum, corrupti assumenda alias adipisci distinctio. Harum neque autem a, quisquam in architecto aspernatur iure tenetur, asperiores voluptatibus obcaecati cum magni ipsum repudiandae hic reprehenderit pariatur, assumenda ex excepturi, velit consectetur. Labore, molestias error, cupiditate autem ea hic tenetur quisquam. Thursdays Fridays

Radio Group Horizontal

Choose your favorite color* Required Field. Red Orange Yellow

Radio Group Horizontal Too Much Content

Choose your favorite color* Required Field. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ut aliquid tenetur sequi pariatur rem expedita similique, rerum, corrupti assumenda alias adipisci distinctio. Harum neque autem a, quisquam in architecto aspernatur iure tenetur, asperiores voluptatibus obcaecati cum magni ipsum repudiandae hic reprehenderit pariatur, assumenda ex excepturi, velit consectetur. Labore, molestias error, cupiditate autem ea hic tenetur quisquam. Orange Yellow

Select

Select Hover

Select Focus

Select Disabled

Select Too Little Content

Select Too Much Content

Select Error

Select With Option Group

Microcopy

Password Your password must contain a letter, a number, and two emoticons

Microcopy below input

Password Your password must contain a letter, a number, and two emoticons

Microcopy Too Much Content

Password Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ut aliquid tenetur sequi pariatur rem expedita similique, rerum, corrupti assumenda alias adipisci distinctio. Harum neque autem a, quisquam in architecto aspernatur iure tenetur, asperiores voluptatibus obcaecati cum magni ipsum repudiandae hic reprehenderit pariatur, assumenda ex excepturi, velit consectetur. Labore, molestias error, cupiditate autem ea hic tenetur quisquam. Dolorum alias odit quas, consequuntur reiciendis consequatur nisi minima sapiente animi culpa temporibus enim quae. Velit ipsum quidem placeat ad expedita quo aspernatur cum! Officia consequatur distinctio debitis totam. Incidunt eum totam quaerat ipsam consequuntur, ut similique explicabo nulla, eaque ad sunt, animi.

Required Fields Key

Required fields

First Name* Required Field.

Field Error Input

First Name* Required Field. This field is required

Field Error Textarea

Tell us a little about yourself* Required Field. This field is required

Field Error Checkbox

Select one or more free gifts to add to your order* Required Field. Keychain Refrigerator Magnet Bumper Sticker You must select at least one free gift

Field Error Checkbox Too Much Content

Select one or more free gifts to add to your order* Required Field. Keychain Refrigerator Magnet Bumper Sticker Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ut aliquid tenetur sequi pariatur rem expedita similique, rerum, corrupti assumenda alias adipisci distinctio. Harum neque autem a, quisquam in architecto aspernatur iure tenetur, asperiores voluptatibus obcaecati cum magni ipsum repudiandae hic reprehenderit pariatur, assumenda ex excepturi, velit consectetur. Labore, molestias error, cupiditate autem ea hic tenetur quisquam. Dolorum alias odit quas, consequuntur reiciendis consequatur nisi minima sapiente animi culpa temporibus enim quae. Velit ipsum quidem placeat ad expedita quo aspernatur cum! Officia consequatur distinctio debitis totam. Incidunt eum totam quaerat ipsam consequuntur, ut similique explicabo nulla, eaque ad sunt, animi.

Field Error Radio

Select the greatest sci-fi franchise of all time* Required Field. Wars Trek You must answer the question

Field Error Select

Choose an option* Required Field.

You must choose an option

Fieldset and Legend

Billing Address

Street

City

State

ZIP

Contact Form Example

Name

Contact Form Example Too Much Content in Label

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ut aliquid tenetur sequi pariatur rem expedita similique, rerum, corrupti assumenda alias adipisci distinctio.

Horizontal Arrangement Example

Credit Card Number* Required Field.

Exp Date* Required Field.

CVC* Required Field.

Favorite Food

Dessert or no?* Required Field. Yes, Please No, Thank You

Full Example

Required fields

First Name* Required Field.

Last Name* Required Field.

Email (Optional) If you provide your email address we'll send a receipt for your purchase

Best Time to Contact You? (Optional) Choose this one Choose this one

Billing Address

Street

City

State

ZIP

Shipping Address

Same as billing address

Street

City

State

ZIP

Special Instructions for your order which you can provide right here this label is long to test wrapping behavior (Optional)

Favorite color from the rainbow Choose as many as you like Red Orange Yellow Green Blue Indigo Violet

Input next to Select (for height comparison only)

Input next to Select, Large (for height comparison only)

Input next to Select, Small (for height comparison only)

Input

Input Hover

Input Focus

Input Disabled

Input Error

Input With Placeholder

Input With Too Much Placeholder

Input With Too Much Content

Textarea

Textarea Hover

Textarea Focus

Textarea Disabled

Textarea Error

Textarea With Placeholder

Textarea With Too Much Placeholder

Textarea With Too Much Content

Label

First Name

Label Required

First Name* Required Field.

Label Optional

First Name (Optional)

Label, Too Much Content

Label, Required Too Much Content

Label, Optional Too Much Content

Checkbox

I accept the terms and conditions

Checkbox Hover

I accept the terms and conditions

Checkbox Focus

I accept the terms and conditions

Checkbox Active

I accept the terms and conditions

Checkbox Disabled

I accept the terms and conditions

Checked Checkbox

Checked checkbox

Checked Checkbox, Hover

Checked checkbox

Checked Checkbox, Active

Checked checkbox

Indeterminate Checkbox

Indeterminate checkbox

Indeterminate Checkbox, Hover

Indeterminate checkbox

Indeterminate Checkbox, Active

Indeterminate checkbox

Checkbox Error

I accept the terms and conditions

Checkbox Too Little Content

Checkbox Too Much Content

Checkbox Group Stacked

Select all the days that apply Mondays Tuesdays Wednesdays Thursdays Fridays

Checkbox Group Stacked Too Much Content

Checkbox Group Horizontal

Select at least one color* Required Field. Red Orange Yellow

Checkbox Group Horizontal Too Much Content

Radio Button

Choose this one

Radio Button Hover

Choose this one

Radio Button Focus

Choose this one

Radio Button Disabled

Choose this one

Radio Button Error

Choose this one

Radio Button Checked

Choose this one

Radio Button Checked, Hover

Choose this one

Radio Button Checked, Active

Choose this one

Radio Button, Too Little Content

Radio Button, Too Much Content

Radio Group Stacked

Select a the day that works best for you Mondays Tuesdays Wednesdays Thursdays Fridays

Radio Group Stacked Too Much Content

Radio Group Horizontal

Choose your favorite color* Required Field. Red Orange Yellow

Radio Group Horizontal Too Much Content

Select

Select Hover

Select Focus

Select Disabled

Select Too Little Content

Select Too Much Content

Select Error

Select With Option Group

Microcopy

Password Your password must contain a letter, a number, and two emoticons

Microcopy below input

Password Your password must contain a letter, a number, and two emoticons

Microcopy Too Much Content

Required Fields Key

Required fields

First Name* Required Field.

Field Error Input

First Name* Required Field. This field is required

Field Error Textarea

Tell us a little about yourself* Required Field. This field is required

Field Error Checkbox

Select one or more free gifts to add to your order* Required Field. Keychain Refrigerator Magnet Bumper Sticker You must select at least one free gift

Field Error Checkbox Too Much Content

Field Error Radio

Select the greatest sci-fi franchise of all time* Required Field. Wars Trek You must answer the question

Field Error Select

Choose an option* Required Field.

You must choose an option

Fieldset and Legend

Billing Address

Street

City

State

ZIP

Contact Form Example

Name

Contact Form Example Too Much Content in Label

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ut aliquid tenetur sequi pariatur rem expedita similique, rerum, corrupti assumenda alias adipisci distinctio.

Horizontal Arrangement Example

Credit Card Number* Required Field.

Exp Date* Required Field.

CVC* Required Field.

Favorite Food

Dessert or no?* Required Field. Yes, Please No, Thank You

Full Example

Required fields

First Name* Required Field.

Last Name* Required Field.

Email (Optional) If you provide your email address we'll send a receipt for your purchase

Best Time to Contact You? (Optional) Choose this one Choose this one

Billing Address

Street

City

State

ZIP

Shipping Address

Same as billing address

Street

City

State

ZIP

Special Instructions for your order which you can provide right here this label is long to test wrapping behavior (Optional)

Favorite color from the rainbow Choose as many as you like Red Orange Yellow Green Blue Indigo Violet

Input next to Select (for height comparison only)

Input next to Select, Large (for height comparison only)

Input next to Select, Small (for height comparison only)

Input

Input Hover

Input Focus

Input Disabled

Input Error

Input With Placeholder

Input With Too Much Placeholder

Input With Too Much Content

Textarea

Textarea Hover

Textarea Focus

Textarea Disabled

Textarea Error

Textarea With Placeholder

Textarea With Too Much Placeholder

Textarea With Too Much Content

Label

First Name

Label Required

First Name* Required Field.

Label Optional

First Name (Optional)

Label, Too Much Content

Label, Required Too Much Content

Label, Optional Too Much Content

Checkbox

I accept the terms and conditions

Checkbox Hover

I accept the terms and conditions

Checkbox Focus

I accept the terms and conditions

Checkbox Active

I accept the terms and conditions

Checkbox Disabled

I accept the terms and conditions

Checked Checkbox

Checked checkbox

Checked Checkbox, Hover

Checked checkbox

Checked Checkbox, Active

Checked checkbox

Indeterminate Checkbox

Indeterminate checkbox

Indeterminate Checkbox, Hover

Indeterminate checkbox

Indeterminate Checkbox, Active

Indeterminate checkbox

Checkbox Error

I accept the terms and conditions

Checkbox Too Little Content

Checkbox Too Much Content

Checkbox Group Stacked

Select all the days that apply Mondays Tuesdays Wednesdays Thursdays Fridays

Checkbox Group Stacked Too Much Content

Checkbox Group Horizontal

Select at least one color* Required Field. Red Orange Yellow

Checkbox Group Horizontal Too Much Content

Radio Button

Choose this one

Radio Button Hover

Choose this one

Radio Button Focus

Choose this one

Radio Button Disabled

Choose this one

Radio Button Error

Choose this one

Radio Button Checked

Choose this one

Radio Button Checked, Hover

Choose this one

Radio Button Checked, Active

Choose this one

Radio Button, Too Little Content

Radio Button, Too Much Content

Radio Group Stacked

Select a the day that works best for you Mondays Tuesdays Wednesdays Thursdays Fridays

Radio Group Stacked Too Much Content

Radio Group Horizontal

Choose your favorite color* Required Field. Red Orange Yellow

Radio Group Horizontal Too Much Content

Select

Select Hover

Select Focus

Select Disabled

Select Too Little Content

Select Too Much Content

Select Error

Select With Option Group

Microcopy

Password Your password must contain a letter, a number, and two emoticons

Microcopy below input

Password Your password must contain a letter, a number, and two emoticons

Microcopy Too Much Content

Required Fields Key

Required fields

First Name* Required Field.

Field Error Input

First Name* Required Field. This field is required

Field Error Textarea

Tell us a little about yourself* Required Field. This field is required

Field Error Checkbox

Select one or more free gifts to add to your order* Required Field. Keychain Refrigerator Magnet Bumper Sticker You must select at least one free gift

Field Error Checkbox Too Much Content

Field Error Radio

Select the greatest sci-fi franchise of all time* Required Field. Wars Trek You must answer the question

Field Error Select

Choose an option* Required Field.

You must choose an option

Fieldset and Legend

Billing Address

Street

City

State

ZIP

Contact Form Example

Name

Contact Form Example Too Much Content in Label

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ut aliquid tenetur sequi pariatur rem expedita similique, rerum, corrupti assumenda alias adipisci distinctio.

Horizontal Arrangement Example

Credit Card Number* Required Field.

Exp Date* Required Field.

CVC* Required Field.

Favorite Food

Dessert or no?* Required Field. Yes, Please No, Thank You

Full Example

Required fields

First Name* Required Field.

Last Name* Required Field.

Email (Optional) If you provide your email address we'll send a receipt for your purchase

Best Time to Contact You? (Optional) Choose this one Choose this one

Billing Address

Street

City

State

ZIP

Shipping Address

Same as billing address

Street

City

State

ZIP

Special Instructions for your order which you can provide right here this label is long to test wrapping behavior (Optional)

Favorite color from the rainbow Choose as many as you like Red Orange Yellow Green Blue Indigo Violet

Input next to Select (for height comparison only)

Input next to Select, Large (for height comparison only)

Input next to Select, Small (for height comparison only)

Input

Input Hover

Input Focus

Input Disabled

Input Error

Input With Placeholder

Input With Too Much Placeholder

Input With Too Much Content

Textarea

Textarea Hover

Textarea Focus

Textarea Disabled

Textarea Error

Textarea With Placeholder

Textarea With Too Much Placeholder

Textarea With Too Much Content

Label

First Name

Label Required

First Name* Required Field.

Label Optional

First Name (Optional)

Label, Too Much Content

Label, Required Too Much Content

Label, Optional Too Much Content

Checkbox

I accept the terms and conditions

Checkbox Hover

I accept the terms and conditions

Checkbox Focus

I accept the terms and conditions

Checkbox Active

I accept the terms and conditions

Checkbox Disabled

I accept the terms and conditions

Checked Checkbox

Checked checkbox

Checked Checkbox, Hover

Checked checkbox

Checked Checkbox, Active

Checked checkbox

Indeterminate Checkbox

Indeterminate checkbox

Indeterminate Checkbox, Hover

Indeterminate checkbox

Indeterminate Checkbox, Active

Indeterminate checkbox

Checkbox Error

I accept the terms and conditions

Checkbox Too Little Content

Checkbox Too Much Content

Checkbox Group Stacked

Select all the days that apply Mondays Tuesdays Wednesdays Thursdays Fridays

Checkbox Group Stacked Too Much Content

Checkbox Group Horizontal

Select at least one color* Required Field. Red Orange Yellow

Checkbox Group Horizontal Too Much Content

Radio Button

Choose this one

Radio Button Hover

Choose this one

Radio Button Focus

Choose this one

Radio Button Disabled

Choose this one

Radio Button Error

Choose this one

Radio Button Checked

Choose this one

Radio Button Checked, Hover

Choose this one

Radio Button Checked, Active

Choose this one

Radio Button, Too Little Content

Radio Button, Too Much Content

Radio Group Stacked

Select a the day that works best for you Mondays Tuesdays Wednesdays Thursdays Fridays

Radio Group Stacked Too Much Content

Radio Group Horizontal

Choose your favorite color* Required Field. Red Orange Yellow

Radio Group Horizontal Too Much Content

Select

Select Hover

Select Focus

Select Disabled

Select Too Little Content

Select Too Much Content

Select Error

Select With Option Group

Microcopy

Password Your password must contain a letter, a number, and two emoticons

Microcopy below input

Password Your password must contain a letter, a number, and two emoticons

Microcopy Too Much Content

Required Fields Key

Required fields

First Name* Required Field.

Field Error Input

First Name* Required Field. This field is required

Field Error Textarea

Tell us a little about yourself* Required Field. This field is required

Field Error Checkbox

Select one or more free gifts to add to your order* Required Field. Keychain Refrigerator Magnet Bumper Sticker You must select at least one free gift

Field Error Checkbox Too Much Content

Field Error Radio

Select the greatest sci-fi franchise of all time* Required Field. Wars Trek You must answer the question

Field Error Select

Choose an option* Required Field.

You must choose an option

Fieldset and Legend

Billing Address

Street

City

State

ZIP

Contact Form Example

Name

Contact Form Example Too Much Content in Label

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ut aliquid tenetur sequi pariatur rem expedita similique, rerum, corrupti assumenda alias adipisci distinctio.

Horizontal Arrangement Example

Credit Card Number* Required Field.

Exp Date* Required Field.

CVC* Required Field.

Favorite Food

Dessert or no?* Required Field. Yes, Please No, Thank You

Full Example

Required fields

First Name* Required Field.

Last Name* Required Field.

Email (Optional) If you provide your email address we'll send a receipt for your purchase

Best Time to Contact You? (Optional) Choose this one Choose this one

Billing Address

Street

City

State

ZIP

Shipping Address

Same as billing address

Street

City

State

ZIP

Special Instructions for your order which you can provide right here this label is long to test wrapping behavior (Optional)

Favorite color from the rainbow Choose as many as you like Red Orange Yellow Green Blue Indigo Violet

Forms Sink

Input

Input Hover

Input Focus

Input Disabled

Input Error

Input With Placeholder

Input With Too Much Placeholder

Input With Too Much Content

Textarea

Textarea Hover

Textarea Focus

Textarea Disabled

Textarea Error

Textarea With Placeholder

Textarea With Too Much Placeholder

Textarea With Too Much Content

Label

Label Required

Label Optional

Label, Too Much Content

Label, Required Too Much Content

Label, Optional Too Much Content

Checkbox

Checkbox Hover

Checkbox Focus

Checkbox Active

Checkbox Disabled

Checked Checkbox

Checked Checkbox, Hover

Checked Checkbox, Active

Indeterminate Checkbox

Indeterminate Checkbox, Hover

Indeterminate Checkbox, Active

Checkbox Error

Checkbox Too Little Content

Checkbox Too Much Content

Checkbox Group Stacked

Checkbox Group Stacked Too Much Content

Checkbox Group Horizontal

Checkbox Group Horizontal Too Much Content

Radio Button

Radio Button Hover

Radio Button Focus

Radio Button Disabled

Radio Button Error

Radio Button Checked

Radio Button Checked, Hover

Radio Button Checked, Active

Radio Button, Too Little Content

Radio Button, Too Much Content

Radio Group Stacked

Radio Group Stacked Too Much Content

Radio Group Horizontal

Radio Group Horizontal Too Much Content

Select

Select Hover

Select Focus

Select Disabled

Select Too Little Content

Select Too Much Content

Select Error

Select With Option Group

Microcopy

Microcopy below input

Microcopy Too Much Content

Required Fields Key

Field Error Input

Field Error Textarea

Field Error Checkbox

Field Error Checkbox Too Much Content

Field Error Radio

Field Error Select

Fieldset and Legend

Contact Form Example

Contact Form Example Too Much Content in Label

Horizontal Arrangement Example

Full Example

Input next to Select (for height comparison only)

Input next to Select, Large (for height comparison only)