0
# Form Components
1

2
Form elements including inputs, labels, form groups, validation components, and input group components for creating accessible and styled forms.
3

4
## Capabilities
5

6
### Form
7

8
Form wrapper component that provides proper form styling and layout options.
9

10
```javascript { .api }
11
/**
12
 * Form wrapper component
13
 * @param props.inline - Apply inline form styling (deprecated in Bootstrap 5)
14
 * @param props.tag - HTML element to render as (default: 'form')
15
 * @param props.innerRef - Ref forwarding
16
 * @param props.className - Additional CSS classes
17
 * @param props.cssModule - CSS Module mapping object
18
 * @param props.children - Form content and components
19
 */
20
function Form(props: {
21
  inline?: boolean;
22
  tag?: React.ElementType;
23
  innerRef?: React.Ref;
24
  className?: string;
25
  cssModule?: object;
26
  children?: React.ReactNode;
27
  [key: string]: any;
28
}): JSX.Element;
29
```
30

31
### Input
32

33
Versatile input component supporting all HTML input types with Bootstrap styling and validation states.
34

35
```javascript { .api }
36
/**
37
 * Form input component with extensive type support
38
 * @param props.type - Input type (text, email, password, number, select, textarea, etc.)
39
 * @param props.size - Input size (string or number, Bootstrap recommends 'sm' or 'lg')
40
 * @param props.bsSize - Bootstrap-specific size prop ('sm' or 'lg')
41
 * @param props.state - Validation state (deprecated, use valid/invalid)
42
 * @param props.valid - Mark input as valid
43
 * @param props.invalid - Mark input as invalid
44
 * @param props.tag - HTML element to render as (auto-determined by type)
45
 * @param props.innerRef - Ref forwarding for accessing the focus() method
46
 * @param props.plaintext - Render as plain text (form-control-plaintext)
47
 * @param props.addon - Style for input group usage
48
 * @param props.className - Additional CSS classes
49
 * @param props.cssModule - CSS Module mapping object
50
 */
51
function Input(props: {
52
  type?: 'text' | 'email' | 'select' | 'file' | 'radio' | 'checkbox' | 'textarea' | 'button' | 'reset' | 'submit' | 'date' | 'datetime-local' | 'hidden' | 'image' | 'month' | 'number' | 'range' | 'search' | 'tel' | 'url' | 'week' | 'password' | 'datetime' | 'time' | 'color' | 'switch';
53
  size?: string | number;
54
  bsSize?: 'sm' | 'lg';
55
  state?: string;
56
  valid?: boolean;
57
  invalid?: boolean;
58
  tag?: React.ElementType;
59
  innerRef?: React.Ref;
60
  plaintext?: boolean;
61
  addon?: boolean;
62
  className?: string;
63
  cssModule?: object;
64
  children?: React.ReactNode;
65
  [key: string]: any;
66
}): JSX.Element;
67
```
68

69
### Label
70

71
Form label component for associating labels with form controls and improving accessibility.
72

73
```javascript { .api }
74
/**
75
 * Form label component
76
 * @param props.hidden - Visually hide label (screen reader accessible)
77
 * @param props.check - Apply checkbox/radio label styling
78
 * @param props.size - Label size for specific input sizes
79
 * @param props.for - HTML for attribute (input ID association)
80
 * @param props.tag - HTML element to render as (default: 'label')
81
 * @param props.className - Additional CSS classes
82
 * @param props.cssModule - CSS Module mapping object
83
 * @param props.xs - Column width for horizontal forms (extra small screens)
84
 * @param props.sm - Column width for horizontal forms (small screens and up)
85
 * @param props.md - Column width for horizontal forms (medium screens and up)
86
 * @param props.lg - Column width for horizontal forms (large screens and up)
87
 * @param props.xl - Column width for horizontal forms (extra large screens and up)
88
 * @param props.children - Label text content
89
 */
90
function Label(props: {
91
  hidden?: boolean;
92
  check?: boolean;
93
  size?: string;
94
  for?: string;
95
  tag?: React.ElementType;
96
  className?: string;
97
  cssModule?: object;
98
  xs?: string | number;
99
  sm?: string | number;
100
  md?: string | number;
101
  lg?: string | number;
102
  xl?: string | number;
103
  children?: React.ReactNode;
104
  [key: string]: any;
105
}): JSX.Element;
106
```
107

108
### FormGroup
109

110
Form group wrapper component for organizing form elements with proper spacing and layout.
111

112
```javascript { .api }
113
/**
114
 * Form group wrapper for organizing form elements  
115
 * @param props.row - Apply row layout for horizontal forms
116
 * @param props.check - Apply styling for checkbox/radio groups
117
 * @param props.inline - Apply inline styling for checkbox/radio groups
118
 * @param props.disabled - Apply disabled styling to group
119
 * @param props.tag - HTML element to render as (default: 'div')
120
 * @param props.className - Additional CSS classes
121
 * @param props.cssModule - CSS Module mapping object
122
 * @param props.children - Form elements (Label, Input, FormFeedback, etc.)
123
 */
124
function FormGroup(props: {
125
  row?: boolean;
126
  check?: boolean;
127
  inline?: boolean;
128
  disabled?: boolean;
129
  tag?: React.ElementType;
130
  className?: string;
131
  cssModule?: object;
132
  children?: React.ReactNode;
133
}): JSX.Element;
134
```
135

136
### FormFeedback
137

138
Form validation feedback component for displaying validation messages and states.
139

140
```javascript { .api }
141
/**
142
 * Form validation feedback component
143
 * @param props.valid - Display valid/success feedback styling
144
 * @param props.tooltip - Display as tooltip-style feedback
145
 * @param props.tag - HTML element to render as (default: 'div')
146
 * @param props.className - Additional CSS classes
147
 * @param props.cssModule - CSS Module mapping object
148
 * @param props.children - Feedback message content
149
 */
150
function FormFeedback(props: {
151
  valid?: boolean;
152
  tooltip?: boolean;
153
  tag?: React.ElementType;
154
  className?: string;
155
  cssModule?: object;
156
  children?: React.ReactNode;
157
}): JSX.Element;
158
```
159

160
### FormText
161

162
Form help text component for providing additional information and guidance.
163

164
```javascript { .api }
165
/**
166
 * Form help text component
167
 * @param props.inline - Display inline with form elements (deprecated)
168
 * @param props.tag - HTML element to render as (default: 'small')
169
 * @param props.color - Text color theme
170
 * @param props.className - Additional CSS classes
171
 * @param props.cssModule - CSS Module mapping object
172
 * @param props.children - Help text content
173
 */
174
function FormText(props: {
175
  inline?: boolean;
176
  tag?: React.ElementType;
177
  color?: string;
178
  className?: string;
179
  cssModule?: object;
180
  children?: React.ReactNode;
181
}): JSX.Element;
182
```
183

184
### InputGroup
185

186
Input group component for combining inputs with addons, buttons, and other elements.
187

188
```javascript { .api }
189
/**
190
 * Input group component for combining inputs with addons
191
 * @param props.tag - HTML element to render as (default: 'div')
192
 * @param props.size - Size for entire input group ('sm' or 'lg')
193
 * @param props.className - Additional CSS classes
194
 * @param props.cssModule - CSS Module mapping object
195
 * @param props.children - Input, InputGroupText, Button, and other components
196
 */
197
function InputGroup(props: {
198
  tag?: React.ElementType;
199
  size?: 'sm' | 'lg';
200
  className?: string;
201
  cssModule?: object;
202
  children?: React.ReactNode;
203
}): JSX.Element;
204
```
205

206
### InputGroupText
207

208
Input group text/addon component for adding text, icons, or other content to input groups.
209

210
```javascript { .api }
211
/**
212
 * Input group text/addon component
213
 * @param props.tag - HTML element to render as (default: 'span')
214
 * @param props.className - Additional CSS classes
215
 * @param props.cssModule - CSS Module mapping object
216
 * @param props.children - Text, icons, or other addon content
217
 */
218
function InputGroupText(props: {
219
  tag?: React.ElementType;
220
  className?: string;
221
  cssModule?: object;
222
  children?: React.ReactNode;
223
}): JSX.Element;
224
```
225

226
## Usage Examples
227

228
### Basic Form
229

230
```jsx
231
import { 
232
  Form, 
233
  FormGroup, 
234
  Label, 
235
  Input, 
236
  Button 
237
} from 'reactstrap';
238

239
function BasicForm() {
240
  return (
241
    <Form>
242
      <FormGroup>
243
        <Label for="email">Email</Label>
244
        <Input 
245
          type="email" 
246
          name="email" 
247
          id="email" 
248
          placeholder="Enter your email" 
249
        />
250
      </FormGroup>
251
      <FormGroup>
252
        <Label for="password">Password</Label>
253
        <Input 
254
          type="password" 
255
          name="password" 
256
          id="password" 
257
          placeholder="Enter your password" 
258
        />
259
      </FormGroup>
260
      <Button color="primary">Submit</Button>
261
    </Form>
262
  );
263
}
264
```
265

266
### Form Validation
267

268
```jsx
269
import { 
270
  Form, 
271
  FormGroup, 
272
  Label, 
273
  Input, 
274
  FormFeedback, 
275
  FormText 
276
} from 'reactstrap';
277

278
function ValidationForm() {
279
  const [form, setForm] = useState({
280
    email: '',
281
    password: ''
282
  });
283
  const [errors, setErrors] = useState({});
284

285
  const validateEmail = (email) => {
286
    return /\S+@\S+\.\S+/.test(email);
287
  };
288

289
  return (
290
    <Form>
291
      <FormGroup>
292
        <Label for="email">Email</Label>
293
        <Input 
294
          type="email" 
295
          name="email" 
296
          id="email"
297
          value={form.email}
298
          onChange={(e) => setForm({...form, email: e.target.value})}
299
          valid={form.email && validateEmail(form.email)}
300
          invalid={form.email && !validateEmail(form.email)}
301
        />
302
        <FormFeedback valid>
303
          Looks good!
304
        </FormFeedback>
305
        <FormFeedback>
306
          Please provide a valid email address.
307
        </FormFeedback>
308
        <FormText>
309
          We'll never share your email with anyone else.
310
        </FormText>
311
      </FormGroup>
312
      
313
      <FormGroup>
314
        <Label for="password">Password</Label>
315
        <Input 
316
          type="password" 
317
          name="password" 
318
          id="password"
319
          value={form.password}
320
          onChange={(e) => setForm({...form, password: e.target.value})}
321
          valid={form.password && form.password.length >= 6}
322
          invalid={form.password && form.password.length < 6}
323
        />
324
        <FormFeedback valid>
325
          Strong password!
326
        </FormFeedback>
327
        <FormFeedback>
328
          Password must be at least 6 characters long.
329
        </FormFeedback>
330
      </FormGroup>
331
    </Form>
332
  );
333
}
334
```
335

336
### Input Types
337

338
```jsx
339
function InputTypes() {
340
  return (
341
    <Form>
342
      <FormGroup>
343
        <Label for="textInput">Text Input</Label>
344
        <Input type="text" name="text" id="textInput" />
345
      </FormGroup>
346
      
347
      <FormGroup>
348
        <Label for="emailInput">Email Input</Label>
349
        <Input type="email" name="email" id="emailInput" />
350
      </FormGroup>
351
      
352
      <FormGroup>
353
        <Label for="passwordInput">Password Input</Label>
354
        <Input type="password" name="password" id="passwordInput" />
355
      </FormGroup>
356
      
357
      <FormGroup>
358
        <Label for="numberInput">Number Input</Label>
359
        <Input type="number" name="number" id="numberInput" />
360
      </FormGroup>
361
      
362
      <FormGroup>
363
        <Label for="dateInput">Date Input</Label>
364
        <Input type="date" name="date" id="dateInput" />
365
      </FormGroup>
366
      
367
      <FormGroup>
368
        <Label for="selectInput">Select Input</Label>
369
        <Input type="select" name="select" id="selectInput">
370
          <option>Choose...</option>
371
          <option>Option 1</option>
372
          <option>Option 2</option>
373
          <option>Option 3</option>
374
        </Input>
375
      </FormGroup>
376
      
377
      <FormGroup>
378
        <Label for="textareaInput">Textarea</Label>
379
        <Input type="textarea" name="textarea" id="textareaInput" />
380
      </FormGroup>
381
      
382
      <FormGroup>
383
        <Label for="fileInput">File Input</Label>
384
        <Input type="file" name="file" id="fileInput" />
385
      </FormGroup>
386
    </Form>
387
  );
388
}
389
```
390

391
### Checkboxes and Radios
392

393
```jsx
394
function CheckboxRadioForm() {
395
  return (
396
    <Form>
397
      <FormGroup check>
398
        <Label check>
399
          <Input type="checkbox" />
400
          Check me out
401
        </Label>
402
      </FormGroup>
403
      
404
      <FormGroup check inline>
405
        <Label check>
406
          <Input type="checkbox" />
407
          Inline checkbox 1
408
        </Label>
409
      </FormGroup>
410
      <FormGroup check inline>
411
        <Label check>
412
          <Input type="checkbox" />
413
          Inline checkbox 2
414
        </Label>
415
      </FormGroup>
416
      
417
      <FormGroup check>
418
        <Label check>
419
          <Input type="radio" name="radio1" />
420
          Option one
421
        </Label>
422
      </FormGroup>
423
      <FormGroup check>
424
        <Label check>
425
          <Input type="radio" name="radio1" />
426
          Option two
427
        </Label>
428
      </FormGroup>
429
      
430
      <FormGroup check disabled>
431
        <Label check>
432
          <Input type="radio" name="radio1" disabled />
433
          Disabled option
434
        </Label>
435
      </FormGroup>
436
    </Form>
437
  );
438
}
439
```
440

441
### Input Sizes
442

443
```jsx
444
function InputSizes() {
445
  return (
446
    <Form>
447
      <FormGroup>
448
        <Label for="largePlaintextInput">Large Input</Label>
449
        <Input 
450
          type="text" 
451
          size="lg" 
452
          name="large" 
453
          id="largePlaintextInput" 
454
          placeholder="Large input" 
455
        />
456
      </FormGroup>
457
      
458
      <FormGroup>
459
        <Label for="defaultInput">Default Input</Label>
460
        <Input 
461
          type="text" 
462
          name="default" 
463
          id="defaultInput" 
464
          placeholder="Default input" 
465
        />
466
      </FormGroup>
467
      
468
      <FormGroup>
469
        <Label for="smallInput">Small Input</Label>
470
        <Input 
471
          type="text" 
472
          size="sm" 
473
          name="small" 
474
          id="smallInput" 
475
          placeholder="Small input" 
476
        />
477
      </FormGroup>
478
    </Form>
479
  );
480
}
481
```
482

483
### Input Groups
484

485
```jsx
486
import { 
487
  InputGroup, 
488
  InputGroupText, 
489
  Input, 
490
  Button 
491
} from 'reactstrap';
492

493
function InputGroups() {
494
  return (
495
    <div>
496
      <InputGroup>
497
        <InputGroupText>@</InputGroupText>
498
        <Input placeholder="Username" />
499
      </InputGroup>
500
      <br />
501
      
502
      <InputGroup>
503
        <Input placeholder="Recipient's username" />
504
        <InputGroupText>@example.com</InputGroupText>
505
      </InputGroup>
506
      <br />
507
      
508
      <InputGroup>
509
        <InputGroupText>$</InputGroupText>
510
        <Input placeholder="Amount" />
511
        <InputGroupText>.00</InputGroupText>
512
      </InputGroup>
513
      <br />
514
      
515
      <InputGroup>
516
        <Input placeholder="Search for..." />
517
        <Button color="secondary">Go!</Button>
518
      </InputGroup>
519
      <br />
520
      
521
      <InputGroup size="lg">
522
        <InputGroupText>Large</InputGroupText>
523
        <Input />
524
      </InputGroup>
525
      <br />
526
      
527
      <InputGroup size="sm">
528
        <InputGroupText>Small</InputGroupText>
529
        <Input />
530
      </InputGroup>
531
    </div>
532
  );
533
}
534
```
535

536
### Horizontal Form
537

538
```jsx
539
import { 
540
  Form, 
541
  FormGroup, 
542
  Label, 
543
  Input, 
544
  Col, 
545
  Row, 
546
  Button 
547
} from 'reactstrap';
548

549
function HorizontalForm() {
550
  return (
551
    <Form>
552
      <FormGroup row>
553
        <Label for="email" sm={2}>Email</Label>
554
        <Col sm={10}>
555
          <Input type="email" name="email" id="email" placeholder="Email" />
556
        </Col>
557
      </FormGroup>
558
      
559
      <FormGroup row>
560
        <Label for="password" sm={2}>Password</Label>
561
        <Col sm={10}>
562
          <Input type="password" name="password" id="password" placeholder="Password" />
563
        </Col>
564
      </FormGroup>
565
      
566
      <FormGroup row>
567
        <Label for="select" sm={2}>Select</Label>
568
        <Col sm={10}>
569
          <Input type="select" name="select" id="select">
570
            <option>Choose...</option>
571
            <option>First</option>
572
            <option>Second</option>
573
          </Input>
574
        </Col>
575
      </FormGroup>
576
      
577
      <FormGroup row>
578
        <Col sm={{ size: 10, offset: 2 }}>
579
          <Button>Submit</Button>
580
        </Col>
581
      </FormGroup>
582
    </Form>
583
  );
584
}
585
```
586

587
### Plaintext Inputs
588

589
```jsx
590
function PlaintextInputs() {
591
  return (
592
    <Form>
593
      <FormGroup row>
594
        <Label for="staticEmail" sm={2}>Email</Label>
595
        <Col sm={10}>
596
          <Input 
597
            plaintext 
598
            readOnly 
599
            defaultValue="email@example.com" 
600
            name="staticEmail" 
601
            id="staticEmail" 
602
          />
603
        </Col>
604
      </FormGroup>
605
      
606
      <FormGroup row>
607
        <Label for="inputPassword" sm={2}>Password</Label>
608
        <Col sm={10}>
609
          <Input 
610
            type="password" 
611
            name="password" 
612
            id="inputPassword" 
613
            placeholder="Password" 
614
          />
615
        </Col>
616
      </FormGroup>
617
    </Form>
618
  );
619
}
620
```