|
25 | 25 | <p>If only one option in a group can be selected, use <a href="radio_button.md">radio button</a>:</p> |
26 | 26 | <table style="none" border="false"> |
27 | 27 | <tr> |
28 | | - <td width="378"> |
| 28 | + <td> |
29 | 29 | <format style="bold" color="E55765">Incorrect</format> |
30 | | - <img src="checkbox_when_not_to_use_1_incorrect.png" alt="A radio button group with only one selected option possible"/> |
| 30 | + <img src="checkbox_when_not_to_use_1_incorrect.png" width="378" alt="A radio button group with only one selected option possible"/> |
31 | 31 | </td> |
32 | | - <td width="378"> |
| 32 | + <td> |
33 | 33 | <format style="bold" color="369650">Correct</format> |
34 | | - <img src="checkbox_when_not_to_use_1_correct.png" alt="Two radio buttons with clear labels"/> |
| 34 | + <img src="checkbox_when_not_to_use_1_correct.png" width="378" alt="Two radio buttons with clear labels"/> |
35 | 35 | </td> |
36 | 36 | </tr> |
37 | 37 | </table> |
38 | 38 | <p>If the behavior in the "off" state is unclear from the checkbox label, use two <a href="radio_button.md">radio buttons</a> instead |
39 | 39 | and label them accordingly:</p> |
40 | 40 | <table style="none" border="false"> |
41 | 41 | <tr> |
42 | | - <td width="378"> |
| 42 | + <td> |
43 | 43 | <format style="bold" color="E55765">Incorrect</format> |
44 | | - <img src="checkbox_when_not_to_use_2_incorrect.png" alt="A radio button group with only one selected option possible"/> |
| 44 | + <img src="checkbox_when_not_to_use_2_incorrect.png" width="378" alt="A radio button group with only one selected option possible"/> |
45 | 45 | </td> |
46 | | - <td width="378"> |
| 46 | + <td> |
47 | 47 | <format style="bold" color="369650">Correct</format> |
48 | | - <img src="checkbox_when_not_to_use_2_correct.png" alt="Two radio buttons with clear labels"/> |
| 48 | + <img src="checkbox_when_not_to_use_2_correct.png" width="378" alt="Two radio buttons with clear labels"/> |
49 | 49 | </td> |
50 | 50 | </tr> |
51 | 51 | </table> |
|
55 | 55 | <p>A label accompanies each checkbox and is placed on the right side.</p> |
56 | 56 | <table style="none" border="false"> |
57 | 57 | <tr> |
58 | | - <td width="378"> |
59 | | - <format color="369650" style="bold">Correct</format><img src="checkbox_label_right_correct.png" |
| 58 | + <td> |
| 59 | + <format color="369650" style="bold">Correct</format><img src="checkbox_label_right_correct.png" width="378" |
60 | 60 | alt="A correct checkbox with the label on the right"/> |
61 | 61 | </td> |
62 | | - <td width="378"> |
63 | | - <format color="E55765" style="bold">Incorrect</format><img src="checkbox_label_right_incorrect.png" |
| 62 | + <td> |
| 63 | + <format color="E55765" style="bold">Incorrect</format><img src="checkbox_label_right_incorrect.png" width="378" |
64 | 64 | alt="An incorrect checkbox with the label on the left"/> |
65 | 65 | </td> |
66 | 66 | </tr> |
|
70 | 70 | <p>If a label is long, split it into two lines. Use HTML formatting for that. Avoid labels that take more than two lines. See recommendations on <a anchor="writing-guidelines">writing concise labels</a> below.</p> |
71 | 71 | <table style="none" border="false"> |
72 | 72 | <tr> |
73 | | - <td width="378"> |
74 | | - <format color="369650" style="bold">Correct</format><img src="checkbox_label_long_correct.png" |
| 73 | + <td> |
| 74 | + <format color="369650" style="bold">Correct</format><img src="checkbox_label_long_correct.png" width="378" |
75 | 75 | alt="A correct checkbox with the label on the right"/> |
76 | 76 | </td> |
77 | | - <td width="378"> |
78 | | - <format color="E55765" style="bold">Incorrect</format><img src="checkbox_label_long_incorrect.png" |
| 77 | + <td> |
| 78 | + <format color="E55765" style="bold">Incorrect</format><img src="checkbox_label_long_incorrect.png" width="378" |
79 | 79 | alt="An incorrect checkbox with the label on the left"/> |
80 | 80 | </td> |
81 | 81 | </tr> |
|
0 commit comments