0
# Form Layout Utilities
1

2
Form layout utilities provide specialized classes for organizing form elements, creating consistent spacing, and handling different form field types with proper alignment and structure.
3

4
## Capabilities
5

6
### Field Container
7

8
Base container for form fields that provides consistent bottom margin and label handling.
9

10
```scss { .api }
11
.field {
12
  margin-bottom: 1rem;
13
}
14

15
.field > label {
16
  display: inline-block;
17
  margin-bottom: 0.5rem;
18
}
19

20
.field > small {
21
  margin-top: 0.25rem;
22
}
23
```
24

25
### Grid-Based Fields
26

27
Integration between form fields and the grid system for horizontal form layouts.
28

29
```scss { .api }
30
.field.grid > label {
31
  display: flex;
32
  align-items: center;
33
}
34

35
.field.grid,
36
.formgrid.grid {
37
  margin-top: 0;
38
}
39

40
.field.grid .col,
41
.field.grid .col-1,
42
.field.grid .col-2,
43
/* ... all col classes ... */
44
.field.grid .col-12,
45
.formgrid.grid .col,
46
.formgrid.grid .col-1,
47
/* ... etc ... */ {
48
  padding-top: 0;
49
  padding-bottom: 0;
50
}
51
```
52

53
### Inline Form Groups
54

55
Horizontal layout for form elements with proper spacing.
56

57
```scss { .api }
58
.formgroup-inline {
59
  display: flex;
60
  flex-wrap: wrap;
61
  align-items: flex-start;
62
}
63

64
.formgroup-inline .field,
65
.formgroup-inline .field-checkbox,
66
.formgroup-inline .field-radiobutton {
67
  margin-right: 1rem;
68
}
69

70
.formgroup-inline .field > label,
71
.formgroup-inline .field-checkbox > label,
72
.formgroup-inline .field-radiobutton > label {
73
  margin-right: 0.5rem;
74
  margin-bottom: 0;
75
}
76
```
77

78
### Checkbox and Radio Button Fields
79

80
Specialized field containers for checkbox and radio button inputs with proper alignment.
81

82
```scss { .api }
83
.field-checkbox,
84
.field-radiobutton {
85
  margin-bottom: 1rem;
86
  display: flex;
87
  align-items: center;
88
}
89

90
.field-checkbox > label,
91
.field-radiobutton > label {
92
  margin-left: 0.5rem;
93
  line-height: 1;
94
}
95
```
96

97
## Usage Examples
98

99
### Basic Vertical Form
100

101
```html
102
<div class="field">
103
  <label for="username">Username</label>
104
  <input id="username" type="text" class="w-full p-2 border-1 border-round">
105
  <small>Enter your username</small>
106
</div>
107

108
<div class="field">
109
  <label for="email">Email</label>
110
  <input id="email" type="email" class="w-full p-2 border-1 border-round">
111
</div>
112
```
113

114
### Horizontal Form with Grid
115

116
```html
117
<div class="field grid">
118
  <label for="firstname" class="col-12 md:col-3">First Name</label>
119
  <div class="col-12 md:col-9">
120
    <input id="firstname" type="text" class="w-full p-2 border-1 border-round">
121
  </div>
122
</div>
123

124
<div class="field grid">
125
  <label for="lastname" class="col-12 md:col-3">Last Name</label>
126
  <div class="col-12 md:col-9">
127
    <input id="lastname" type="text" class="w-full p-2 border-1 border-round">
128
  </div>
129
</div>
130
```
131

132
### Inline Form Group
133

134
```html
135
<div class="formgroup-inline">
136
  <div class="field">
137
    <label for="city">City</label>
138
    <input id="city" type="text" class="p-2 border-1 border-round">
139
  </div>
140
  
141
  <div class="field">
142
    <label for="state">State</label>
143
    <input id="state" type="text" class="p-2 border-1 border-round">
144
  </div>
145
  
146
  <div class="field">
147
    <label for="zip">Zip</label>
148
    <input id="zip" type="text" class="p-2 border-1 border-round">
149
  </div>
150
</div>
151
```
152

153
### Checkbox and Radio Fields
154

155
```html
156
<div class="field-checkbox">
157
  <input id="newsletter" type="checkbox" class="mr-2">
158
  <label for="newsletter">Subscribe to newsletter</label>
159
</div>
160

161
<div class="field-radiobutton">
162
  <input id="option1" type="radio" name="choice" class="mr-2">
163
  <label for="option1">Option 1</label>
164
</div>
165

166
<div class="field-radiobutton">
167
  <input id="option2" type="radio" name="choice" class="mr-2">
168
  <label for="option2">Option 2</label>
169
</div>
170
```
171

172
## Configuration Variables
173

174
Form layout utilities use these configurable variables:
175

176
```scss { .api }
177
$fieldMargin: 1rem !default;         // Bottom margin for .field
178
$fieldLabelMargin: 0.5rem !default;  // Bottom margin for field labels
179
$helperTextMargin: 0.25rem !default; // Top margin for helper text
180
```