0
# Form Components
1

2
Comprehensive form controls with validation support and accessibility features.
3

4
## Capabilities
5

6
### Form
7

8
Form wrapper component providing context for form controls.
9

10
```typescript { .api }
11
/**
12
 * Form component for form context
13
 * @param validated - Show validation styles
14
 */
15
function Form(props: FormProps): JSX.Element;
16

17
interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
18
  /** Show validation styles */
19
  validated?: boolean;
20
  /** Component used for the root node */
21
  as?: React.ElementType;
22
  /** Bootstrap CSS class prefix */
23
  bsPrefix?: string;
24
}
25
```
26

27
### FormControl
28

29
Input control component for text inputs, textareas, and selects.
30

31
```typescript { .api }
32
/**
33
 * FormControl component for input controls
34
 * @param type - Input type
35
 * @param size - Size variant
36
 * @param isValid - Valid state
37
 * @param isInvalid - Invalid state
38
 */
39
function FormControl(props: FormControlProps): JSX.Element;
40

41
interface FormControlProps extends React.InputHTMLAttributes<HTMLInputElement> {
42
  /** Input type */
43
  type?: string;
44
  /** Size variant */
45
  size?: "sm" | "lg";
46
  /** Valid state */
47
  isValid?: boolean;
48
  /** Invalid state */  
49
  isInvalid?: boolean;
50
  /** Plain text styling */
51
  plaintext?: boolean;
52
  /** Component used for the root node */
53
  as?: React.ElementType;
54
  /** Bootstrap CSS class prefix */
55
  bsPrefix?: string;
56
}
57
```
58

59
**FormControl Usage Examples:**
60

61
```typescript
62
import { Form } from "react-bootstrap";
63

64
// Basic text input
65
<Form.Control 
66
  type="text" 
67
  placeholder="Enter text"
68
  value={value}
69
  onChange={(e) => setValue(e.target.value)}
70
/>
71

72
// Large size input with validation
73
<Form.Control
74
  type="email"
75
  size="lg"
76
  placeholder="Enter email"
77
  isValid={isValidEmail}
78
  isInvalid={!isValidEmail && touched}
79
/>
80

81
// Textarea
82
<Form.Control 
83
  as="textarea" 
84
  rows={3} 
85
  placeholder="Enter message"
86
/>
87

88
// Plaintext (read-only)
89
<Form.Control 
90
  plaintext 
91
  readOnly 
92
  defaultValue="email@example.com" 
93
/>
94
```
95

96
### FormCheck
97

98
Checkbox and radio button component with label support.
99

100
```typescript { .api }
101
/**
102
 * FormCheck component for checkboxes and radio buttons
103
 * @param type - Check type
104
 * @param inline - Inline layout
105
 * @param reverse - Reverse label position
106
 * @param disabled - Disabled state
107
 */
108
function FormCheck(props: FormCheckProps): JSX.Element;
109

110
interface FormCheckProps extends React.InputHTMLAttributes<HTMLInputElement> {
111
  /** Check type */
112
  type?: "checkbox" | "radio" | "switch";
113
  /** Inline layout */
114
  inline?: boolean;
115
  /** Reverse label position */
116
  reverse?: boolean;
117
  /** Disabled state */
118
  disabled?: boolean;
119
  /** Unique identifier */
120
  id?: string;
121
  /** Label content */
122
  label?: React.ReactNode;
123
  /** Valid state */
124
  isValid?: boolean;
125
  /** Invalid state */
126
  isInvalid?: boolean;
127
  /** Feedback content */
128
  feedback?: React.ReactNode;
129
  /** Feedback type */
130
  feedbackType?: "valid" | "invalid";
131
  /** Bootstrap CSS class prefix */
132
  bsPrefix?: string;
133
}
134
```
135

136
**FormCheck Usage Examples:**
137

138
```typescript
139
import { Form } from "react-bootstrap";
140

141
// Basic checkbox
142
<Form.Check 
143
  type="checkbox"
144
  id="check-1"
145
  label="Check me out"
146
  checked={isChecked}
147
  onChange={(e) => setIsChecked(e.target.checked)}
148
/>
149

150
// Radio buttons
151
<Form.Check
152
  type="radio"
153
  id="radio-1"
154
  name="radioGroup"
155
  label="Option 1"
156
  value="option1"
157
  checked={selectedOption === 'option1'}
158
  onChange={(e) => setSelectedOption(e.target.value)}
159
/>
160

161
// Switch
162
<Form.Check 
163
  type="switch"
164
  id="switch-1"
165
  label="Toggle me"
166
  checked={isToggled}
167
  onChange={(e) => setIsToggled(e.target.checked)}
168
/>
169

170
// Inline checkboxes
171
<Form.Check
172
  inline
173
  type="checkbox"
174
  id="inline-1"
175
  label="Inline 1"
176
/>
177
<Form.Check
178
  inline
179
  type="checkbox"
180
  id="inline-2"
181
  label="Inline 2"
182
/>
183
```
184

185
### FormSelect
186

187
Select dropdown component.
188

189
```typescript { .api }
190
/**
191
 * FormSelect component for select dropdowns
192
 * @param size - Size variant
193
 * @param isValid - Valid state
194
 * @param isInvalid - Invalid state
195
 */
196
function FormSelect(props: FormSelectProps): JSX.Element;
197

198
interface FormSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
199
  /** Size variant */
200
  size?: "sm" | "lg";
201
  /** Valid state */
202
  isValid?: boolean;
203
  /** Invalid state */
204
  isInvalid?: boolean;
205
  /** Component used for the root node */
206
  as?: React.ElementType;
207
  /** Bootstrap CSS class prefix */
208
  bsPrefix?: string;
209
}
210
```
211

212
**FormSelect Usage Examples:**
213

214
```typescript
215
import { Form } from "react-bootstrap";
216

217
// Basic select
218
<Form.Select 
219
  value={selectedValue}
220
  onChange={(e) => setSelectedValue(e.target.value)}
221
>
222
  <option>Choose...</option>
223
  <option value="1">One</option>
224
  <option value="2">Two</option>
225
  <option value="3">Three</option>
226
</Form.Select>
227

228
// Large select with validation
229
<Form.Select 
230
  size="lg"
231
  isInvalid={!selectedValue}
232
>
233
  <option value="">Select an option</option>
234
  <option value="option1">Option 1</option>
235
  <option value="option2">Option 2</option>
236
</Form.Select>
237
```
238

239
### FormLabel
240

241
Label component for form controls.
242

243
```typescript { .api }
244
/**
245
 * FormLabel component for form labels
246
 * @param htmlFor - Associated control ID
247
 * @param column - Column layout
248
 * @param visuallyHidden - Screen reader only
249
 */
250
function FormLabel(props: FormLabelProps): JSX.Element;
251

252
interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
253
  /** Associated control ID */
254
  htmlFor?: string;
255
  /** Column layout */
256
  column?: boolean | "sm" | "lg";
257
  /** Screen reader only */
258
  visuallyHidden?: boolean;
259
  /** Component used for the root node */
260
  as?: React.ElementType;
261
  /** Bootstrap CSS class prefix */
262
  bsPrefix?: string;
263
}
264
```
265

266
### FormText
267

268
Help text component for form controls.
269

270
```typescript { .api }
271
/**
272
 * FormText component for help text
273
 * @param muted - Muted styling
274
 */
275
function FormText(props: FormTextProps): JSX.Element;
276

277
interface FormTextProps extends React.HTMLAttributes<HTMLElement> {
278
  /** Muted styling */
279
  muted?: boolean;
280
  /** Component used for the root node */
281
  as?: React.ElementType;
282
  /** Bootstrap CSS class prefix */
283
  bsPrefix?: string;
284
}
285
```
286

287
### FormGroup
288

289
Group component for organizing form controls.
290

291
```typescript { .api }
292
/**
293
 * FormGroup component for grouping form elements
294
 * @param controlId - Unique control identifier
295
 */
296
function FormGroup(props: FormGroupProps): JSX.Element;
297

298
interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
299
  /** Unique control identifier */
300
  controlId?: string;
301
  /** Component used for the root node */
302
  as?: React.ElementType;
303
  /** Bootstrap CSS class prefix */
304
  bsPrefix?: string;
305
}
306
```
307

308
### FloatingLabel
309

310
Floating label component for modern form styling.
311

312
```typescript { .api }
313
/**
314
 * FloatingLabel component for floating labels
315
 * @param controlId - Associated control ID
316
 * @param label - Label text
317
 */
318
function FloatingLabel(props: FloatingLabelProps): JSX.Element;
319

320
interface FloatingLabelProps extends React.HTMLAttributes<HTMLDivElement> {
321
  /** Associated control ID */
322
  controlId?: string;
323
  /** Label text */
324
  label: React.ReactNode;
325
  /** Bootstrap CSS class prefix */
326
  bsPrefix?: string;
327
}
328
```
329

330
**Comprehensive Form Example:**
331

332
```typescript
333
import { Form, Button, Row, Col } from "react-bootstrap";
334

335
function ContactForm() {
336
  const [validated, setValidated] = useState(false);
337

338
  const handleSubmit = (event) => {
339
    const form = event.currentTarget;
340
    if (form.checkValidity() === false) {
341
      event.preventDefault();
342
      event.stopPropagation();
343
    }
344
    setValidated(true);
345
  };
346

347
  return (
348
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
349
      <Row className="mb-3">
350
        <Form.Group as={Col} md="4" controlId="validationCustom01">
351
          <Form.Label>First name</Form.Label>
352
          <Form.Control
353
            required
354
            type="text"
355
            placeholder="First name"
356
            defaultValue="Mark"
357
          />
358
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
359
        </Form.Group>
360
        
361
        <Form.Group as={Col} md="4" controlId="validationCustom02">
362
          <Form.Label>Last name</Form.Label>
363
          <Form.Control
364
            required
365
            type="text"
366
            placeholder="Last name"
367
            defaultValue="Otto"
368
          />
369
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
370
        </Form.Group>
371
        
372
        <Form.Group as={Col} md="4" controlId="validationCustomUsername">
373
          <Form.Label>Username</Form.Label>
374
          <Form.Control
375
            type="text"
376
            placeholder="Username"
377
            required
378
          />
379
          <Form.Control.Feedback type="invalid">
380
            Please choose a username.
381
          </Form.Control.Feedback>
382
        </Form.Group>
383
      </Row>
384
      
385
      <Form.Group className="mb-3">
386
        <Form.Check
387
          required
388
          label="Agree to terms and conditions"
389
          feedback="You must agree before submitting."
390
          feedbackType="invalid"
391
        />
392
      </Form.Group>
393
      
394
      <Button type="submit">Submit form</Button>
395
    </Form>
396
  );
397
}
398
```
399

400
### InputGroup
401

402
Input group component for adding icons, buttons, or text to inputs.
403

404
```typescript { .api }
405
/**
406
 * InputGroup component for input groups
407
 * @param size - Size variant
408
 * @param hasValidation - Has validation styling
409
 */
410
function InputGroup(props: InputGroupProps): JSX.Element;
411

412
interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
413
  /** Size variant */
414
  size?: "sm" | "lg";
415
  /** Has validation styling */
416
  hasValidation?: boolean;
417
  /** Component used for the root node */
418
  as?: React.ElementType;
419
  /** Bootstrap CSS class prefix */
420
  bsPrefix?: string;
421
}
422
```
423

424
### InputGroupText
425

426
Text addon for input groups.
427

428
```typescript { .api }
429
/**
430
 * InputGroupText component for input group text
431
 */
432
function InputGroupText(props: InputGroupTextProps): JSX.Element;
433

434
interface InputGroupTextProps extends React.HTMLAttributes<HTMLElement> {
435
  /** Component used for the root node */
436
  as?: React.ElementType;
437
  /** Bootstrap CSS class prefix */
438
  bsPrefix?: string;
439
}
440
```
441

442
### FormRange
443

444
Range input component with slider styling.
445

446
```typescript { .api }
447
/**
448
 * FormRange component for range inputs
449
 * @param min - Minimum value
450
 * @param max - Maximum value
451
 * @param step - Step increment
452
 */
453
function FormRange(props: FormRangeProps): JSX.Element;
454

455
interface FormRangeProps extends React.InputHTMLAttributes<HTMLInputElement> {
456
  /** Minimum value */
457
  min?: number;
458
  /** Maximum value */
459
  max?: number;
460
  /** Step increment */
461
  step?: number;
462
  /** Valid state */
463
  isValid?: boolean;
464
  /** Invalid state */
465
  isInvalid?: boolean;
466
  /** Component used for the root node */
467
  as?: React.ElementType;
468
  /** Bootstrap CSS class prefix */
469
  bsPrefix?: string;
470
}
471
```
472

473
### FormFloating
474

475
Floating label container component.
476

477
```typescript { .api }
478
/**
479
 * FormFloating component for floating label containers
480
 */
481
function FormFloating(props: FormFloatingProps): JSX.Element;
482

483
interface FormFloatingProps extends React.HTMLAttributes<HTMLDivElement> {
484
  /** Component used for the root node */
485
  as?: React.ElementType;
486
  /** Bootstrap CSS class prefix */
487
  bsPrefix?: string;
488
}
489
```
490

491
### Switch
492

493
Switch toggle component (alias for FormCheck with type="switch").
494

495
```typescript { .api }
496
/**
497
 * Switch component for toggle switches
498
 */
499
function Switch(props: SwitchProps): JSX.Element;
500

501
interface SwitchProps extends Omit<FormCheckProps, 'type'> {
502
  /** Switch is always type="switch" */
503
  type?: 'switch';
504
}
505
```
506

507
## Form Compound Components
508

509
React Bootstrap Form components support compound component patterns for cleaner imports:
510

511
```typescript { .api }
512
// Compound component structure
513
Form.Control = FormControl;
514
Form.Check = FormCheck;
515
Form.Switch = Switch;
516
Form.Group = FormGroup;
517
Form.Label = FormLabel;
518
Form.Text = FormText;
519
Form.Select = FormSelect;
520
Form.Range = FormRange;
521
Form.Floating = FormFloating;
522
Form.FloatingLabel = FloatingLabel;
523

524
// InputGroup compound components
525
InputGroup.Text = InputGroupText;
526

527
// FormControl compound components  
528
FormControl.Feedback = Feedback;
529
```
530

531
**InputGroup Usage Examples:**
532

533
```typescript
534
import { InputGroup, Form, Button } from "react-bootstrap";
535

536
// Input with prepended text
537
<InputGroup className="mb-3">
538
  <InputGroup.Text>@</InputGroup.Text>
539
  <Form.Control placeholder="Username" />
540
</InputGroup>
541

542
// Input with appended button
543
<InputGroup className="mb-3">
544
  <Form.Control placeholder="Search..." />
545
  <Button variant="outline-secondary" id="button-addon2">
546
    Search
547
  </Button>
548
</InputGroup>
549

550
// Input with both prepend and append
551
<InputGroup>
552
  <InputGroup.Text>$</InputGroup.Text>
553
  <Form.Control placeholder="0.00" />
554
  <InputGroup.Text>.00</InputGroup.Text>
555
</InputGroup>
556
```