Skip to content

Commit 6a2a8ef

Browse files
mdomdo
committed
Reorganize some v6 form control sizing docs after resize PR merged
1 parent 2f6843d commit 6a2a8ef

1 file changed

Lines changed: 85 additions & 53 deletions

File tree

‎site/src/content/docs/forms/form-control.mdx‎

Lines changed: 85 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -16,90 +16,122 @@ Form controls are styled with a mix of Sass and CSS variables, allowing them to
1616
<Example class="vstack gap-3" code={`<div>
1717
<label for="exampleFormControlInput1" class="form-label">Email address</label>
1818
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
19+
</div>`} />
20+
21+
## Textarea
22+
23+
Textareas use the same `.form-control` class as inputs. Modify their height by using the `rows` attribute or using custom CSS.
24+
25+
<Example class="vstack gap-3" code={`<div>
26+
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
27+
<textarea class="form-control" id="exampleFormControlTextarea1"></textarea>
1928
</div>
29+
2030
<div>
21-
<label for="exampleFormControlSelect1" class="form-label">Example select</label>
22-
<select class="form-control" id="exampleFormControlSelect1">
23-
<option>Open this select menu</option>
31+
<label for="exampleFormControlTextarea2" class="form-label">Taller textarea</label>
32+
<textarea class="form-control" id="exampleFormControlTextarea2" rows="4"></textarea>
33+
</div>`} />
34+
35+
## Select
36+
37+
Basic select element styles are provided by the `.form-control` class. Styles are limited by the browser—options and popovers cannot be styled.
38+
39+
<Example code={`<div>
40+
<label for="exampleFormControlSelect2" class="form-label">Example select</label>
41+
<select class="form-control" id="exampleFormControlSelect2">
42+
<option>Choose one…</option>
43+
<option value="1">One</option>
44+
<option value="2">Two</option>
45+
<option value="3">Three</option>
46+
</select>
47+
</div>`} />
48+
49+
The `multiple` attribute is supported on select elements:
50+
51+
<Example code={`<div>
52+
<label for="exampleFormControlSelect3" class="form-label">Multiple select</label>
53+
<select class="form-control" id="exampleFormControlSelect3" multiple aria-label="Multiple select example">
54+
<option selected>Open this select menu</option>
55+
<option value="1">One</option>
56+
<option value="2">Two</option>
57+
<option value="3">Three</option>
58+
</select>
59+
</div>`} />
60+
61+
As is the `size` attribute:
62+
63+
<Example code={`<div>
64+
<label for="exampleFormControlSelect4" class="form-label">Size 3 select</label>
65+
<select class="form-control" id="exampleFormControlSelect4" size="3" aria-label="Size 3 select example">
66+
<option selected>Open this select menu</option>
2467
<option value="1">One</option>
2568
<option value="2">Two</option>
2669
<option value="3">Three</option>
2770
</select>
28-
</div>
29-
<div>
30-
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
31-
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
3271
</div>`} />
3372

3473
## Sizes
3574

3675
Change the size of a form control by using classes like `.form-control-lg` and `.form-control-sm`. This adjusts `height`, `padding`, `font-size`, `line-height`, and `border-radius`.
3776

3877
<Example class="vstack gap-3" code={`<div>
39-
<label for="largeInput" class="form-label">Large input</label>
40-
<input class="form-control form-control-lg" type="text" id="largeInput" placeholder="Large input" aria-label="Large input example">
78+
<label for="sizesInputSmall" class="form-label">Small input</label>
79+
<input class="form-control form-control-sm" type="text" id="sizesInputSmall" placeholder="Small input" aria-label="Small input example">
4180
</div>
4281
<div>
43-
<label for="largeSelect" class="form-label">Large select</label>
44-
<select class="form-control form-control-lg" id="largeSelect">
45-
<option>Open this select menu</option>
46-
<option value="1">One</option>
47-
<option value="2">Two</option>
48-
<option value="3">Three</option>
49-
</select>
82+
<label for="sizesInputDefault" class="form-label">Default input</label>
83+
<input class="form-control" type="text" id="sizesInputDefault" placeholder="Default input" aria-label="Default input example">
5084
</div>
5185
<div>
52-
<label for="largeTextarea" class="form-label">Large textarea</label>
53-
<textarea class="form-control form-control-lg" id="largeTextarea" rows="3" placeholder="Large textarea" aria-label="Large textarea example"></textarea>
86+
<label for="sizesInputLarge" class="form-label">Large input</label>
87+
<input class="form-control form-control-lg" type="text" id="sizesInputLarge" placeholder="Large input" aria-label="Large input example">
5488
</div>`} />
5589

90+
And for textareas:
91+
5692
<Example class="vstack gap-3" code={`<div>
57-
<label for="smallInput" class="form-label">Small input</label>
58-
<input class="form-control form-control-sm" type="text" id="smallInput" placeholder="Small input" aria-label="Small input example">
93+
<label for="sizesTextareaSmall" class="form-label">Small textarea</label>
94+
<textarea class="form-control form-control-sm" id="sizesTextareaSmall" placeholder="Small textarea" aria-label="Small textarea example"></textarea>
5995
</div>
6096
<div>
61-
<label for="smallSelect" class="form-label">Small select</label>
62-
<select class="form-control form-control-sm" id="smallSelect">
97+
<label for="sizesTextareaDefault" class="form-label">Default textarea</label>
98+
<textarea class="form-control" id="sizesTextareaDefault" placeholder="Default textarea" aria-label="Default textarea example"></textarea>
99+
</div>
100+
<div>
101+
<label for="sizesTextareaLarge" class="form-label">Large textarea</label>
102+
<textarea class="form-control form-control-lg" id="sizesTextareaLarge" placeholder="Large textarea" aria-label="Large textarea example"></textarea>
103+
</div>`} />
104+
105+
And for selects:
106+
107+
<Example class="vstack gap-3" code={`<div>
108+
<label for="sizesSelectSmall" class="form-label">Small select</label>
109+
<select class="form-control form-control-sm" id="sizesSelectSmall">
110+
<option>Open this select menu</option>
111+
<option value="1">One</option>
112+
<option value="2">Two</option>
113+
<option value="3">Three</option>
114+
</select>
115+
</div>
116+
<div>
117+
<label for="sizesSelectDefault" class="form-label">Default select</label>
118+
<select class="form-control" id="sizesSelectDefault">
63119
<option>Open this select menu</option>
64120
<option value="1">One</option>
65121
<option value="2">Two</option>
66122
<option value="3">Three</option>
67123
</select>
68124
</div>
69125
<div>
70-
<label for="smallTextarea" class="form-label">Small textarea</label>
71-
<textarea class="form-control form-control-sm" id="smallTextarea" rows="3" placeholder="Small textarea" aria-label="Small textarea example"></textarea>
126+
<label for="sizesSelectLarge" class="form-label">Large select</label>
127+
<select class="form-control form-control-lg" id="sizesSelectLarge">
128+
<option>Open this select menu</option>
129+
<option value="1">One</option>
130+
<option value="2">Two</option>
131+
<option value="3">Three</option>
132+
</select>
72133
</div>`} />
73134

74-
## Select
75-
76-
Basic select element styles are provided by the `.form-control` class. Styles are limited by the browser—options and popovers cannot be styled.
77-
78-
<Example code={`<select class="form-control" id="exampleFormControlSelect2">
79-
<option>Choose one…</option>
80-
<option value="1">One</option>
81-
<option value="2">Two</option>
82-
<option value="3">Three</option>
83-
</select>`} />
84-
85-
The `multiple` attribute is supported on select elements:
86-
87-
<Example code={`<select class="form-select" multiple aria-label="Multiple select example">
88-
<option selected>Open this select menu</option>
89-
<option value="1">One</option>
90-
<option value="2">Two</option>
91-
<option value="3">Three</option>
92-
</select>`} />
93-
94-
As is the `size` attribute:
95-
96-
<Example code={`<select class="form-select" size="3" aria-label="Size 3 select example">
97-
<option selected>Open this select menu</option>
98-
<option value="1">One</option>
99-
<option value="2">Two</option>
100-
<option value="3">Three</option>
101-
</select>`} />
102-
103135
## Form text
104136

105137
Block-level or inline-level form text can be created using `.form-text`.

0 commit comments

Comments
 (0)