File tree Expand file tree Collapse file tree 1 file changed +20
-0
lines changed Expand file tree Collapse file tree 1 file changed +20
-0
lines changed Original file line number Diff line number Diff line change @@ -222,3 +222,23 @@ is given `role="tab"`, and the content that can be expanded upon selection is gi
222222step content is automatically set based on step selection change.
223223
224224The stepper and each step should be given a meaningful label via ` aria-label ` or ` aria-labelledby ` .
225+
226+ Prefer verticl steppers when building for small screen sizes, as horizontal
227+ steppers typically take up significantly more horizontal space thus introducing
228+ horizontal scrolling. Applications with multiple scrolling dimensions make
229+ content harder to consume for some users. See the [ Responsive Stepper section] ( #responsive-stepper )
230+ above for an example on building a stepper that adjusts its layout based on
231+ viewport size.
232+
233+ #### Forms
234+ Steppers often contain forms and form controls. If validation errors inside of a
235+ stepper's form prevents moving to another step, make sure that your form
236+ controls communicate error messages to assistive technology. This helps the user
237+ know why they can't advance to another step. You can accomplish this by using
238+ ` <mat-error> ` with ` <mat-form-field> ` , or by using an ARIA live region.
239+
240+ When a step contains a forms validation error, ` MatStepper ` will display the
241+ error in the step's header if specified. See the [ Error State section] ( #error-state )
242+ for an example of a stepper with an error message. For non-linear steppers, you
243+ should use an ARIA live region to announce error messages when users navigate
244+ away from a step with an error message.
You can’t perform that action at this time.
0 commit comments