0
# Input Components
1

2
Input components provide form controls and interactive elements for user input, including buttons, text fields, selects, checkboxes, and other form elements.
3

4
## Capabilities
5

6
### Button
7

8
Material Design button component with multiple variants and states.
9

10
```typescript { .api }
11
/**
12
 * Material Design button component with multiple variants and states
13
 * @param props - Button props
14
 * @returns Button React component
15
 */
16
function Button(props: ButtonProps): JSX.Element;
17

18
interface ButtonProps extends StandardProps<ButtonBaseProps, ButtonClassKey> {
19
  children: React.ReactNode;
20
  color?: 'default' | 'inherit' | 'primary' | 'secondary';
21
  component?: React.ElementType;
22
  disabled?: boolean;
23
  disableFocusRipple?: boolean;
24
  disableRipple?: boolean;
25
  endIcon?: React.ReactNode;
26
  fullWidth?: boolean;
27
  href?: string;
28
  mini?: boolean; // For fab variant mini styling
29
  size?: 'small' | 'medium' | 'large';
30
  startIcon?: React.ReactNode;
31
  type?: string;
32
  variant?: 'text' | 'outlined' | 'contained' | 'fab' | 'extendedFab' | 'flat' | 'raised'; // Note: 'flat' and 'raised' are deprecated
33
}
34

35
type ButtonClassKey = 'root' | 'label' | 'text' | 'textPrimary' | 'textSecondary' | 'outlined' | 'outlinedPrimary' | 'outlinedSecondary' | 'contained' | 'containedPrimary' | 'containedSecondary' | 'focusVisible' | 'disabled' | 'colorInherit' | 'textSizeSmall' | 'textSizeLarge' | 'outlinedSizeSmall' | 'outlinedSizeLarge' | 'containedSizeSmall' | 'containedSizeLarge' | 'sizeSmall' | 'sizeLarge' | 'fullWidth' | 'startIcon' | 'endIcon' | 'iconSizeSmall' | 'iconSizeMedium' | 'iconSizeLarge';
36
```
37

38
**Usage Examples:**
39

40
```typescript
41
import { Button } from '@material-ui/core';
42
import { Save as SaveIcon } from '@material-ui/icons';
43

44
// Basic button variants
45
<Button>Default</Button>
46
<Button variant="contained" color="primary">Contained</Button>
47
<Button variant="outlined" color="secondary">Outlined</Button>
48

49
// Button with icons
50
<Button startIcon={<SaveIcon />} variant="contained" color="primary">
51
  Save
52
</Button>
53

54
// Full width button
55
<Button variant="contained" fullWidth>
56
  Full Width Button
57
</Button>
58
```
59

60
### Button Base
61

62
Unstyled button component that serves as the foundation for other button components.
63

64
```typescript { .api }
65
/**
66
 * Unstyled button component that serves as the foundation for other button components
67
 * @param props - Button base props
68
 * @returns Button base React component
69
 */
70
function ButtonBase(props: ButtonBaseProps): JSX.Element;
71

72
interface ButtonBaseProps extends StandardProps<React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonBaseClassKey> {
73
  action?: React.Ref<ButtonBaseActions>;
74
  buttonRef?: React.Ref<any>;
75
  centerRipple?: boolean;
76
  children?: React.ReactNode;
77
  component?: React.ElementType;
78
  disableRipple?: boolean;
79
  disableTouchRipple?: boolean;
80
  focusRipple?: boolean;
81
  focusVisibleClassName?: string;
82
  onFocusVisible?: React.FocusEventHandler<any>;
83
  TouchRippleProps?: Partial<TouchRippleProps>;
84
  type?: 'submit' | 'reset' | 'button';
85
}
86

87
interface ButtonBaseActions {
88
  focusVisible(): void;
89
}
90

91
type ButtonBaseClassKey = 'root' | 'disabled' | 'focusVisible';
92
```
93

94
### Floating Action Button (Fab)
95

96
Floating action button component for primary actions.
97

98
```typescript { .api }
99
/**
100
 * Floating action button component for primary actions
101
 * @param props - Fab props
102
 * @returns Fab React component
103
 */
104
function Fab(props: FabProps): JSX.Element;
105

106
interface FabProps extends StandardProps<ButtonBaseProps, FabClassKey> {
107
  children: React.ReactNode;
108
  color?: 'default' | 'inherit' | 'primary' | 'secondary';
109
  component?: React.ElementType;
110
  disabled?: boolean;
111
  disableFocusRipple?: boolean;
112
  disableRipple?: boolean;
113
  href?: string;
114
  size?: 'small' | 'medium' | 'large';
115
  variant?: 'round' | 'extended';
116
}
117

118
type FabClassKey = 'root' | 'primary' | 'secondary' | 'extended' | 'focusVisible' | 'disabled' | 'colorInherit' | 'sizeSmall' | 'sizeMedium';
119
```
120

121
**Usage Examples:**
122

123
```typescript
124
import { Fab } from '@material-ui/core';
125
import { Add as AddIcon, Edit as EditIcon } from '@material-ui/icons';
126

127
// Basic Fab
128
<Fab color="primary">
129
  <AddIcon />
130
</Fab>
131

132
// Extended Fab with text
133
<Fab variant="extended" color="secondary">
134
  <EditIcon />
135
  Edit
136
</Fab>
137

138
// Small Fab
139
<Fab size="small" color="primary">
140
  <AddIcon />
141
</Fab>
142
```
143

144
### Text Field
145

146
Comprehensive text input component with Material Design styling.
147

148
```typescript { .api }
149
/**
150
 * Comprehensive text input component with Material Design styling
151
 * @param props - Text field props
152
 * @returns Text field React component
153
 */
154
function TextField(props: TextFieldProps): JSX.Element;
155

156
interface TextFieldProps extends StandardProps<FormControlProps, TextFieldClassKey> {
157
  autoComplete?: string;
158
  autoFocus?: boolean;
159
  children?: React.ReactNode;
160
  defaultValue?: unknown;
161
  disabled?: boolean;
162
  error?: boolean;
163
  FormHelperTextProps?: Partial<FormHelperTextProps>;
164
  fullWidth?: boolean;
165
  helperText?: React.ReactNode;
166
  id?: string;
167
  InputLabelProps?: Partial<InputLabelProps>;
168
  inputProps?: InputBaseComponentProps;
169
  InputProps?: Partial<InputProps>;
170
  inputRef?: React.Ref<any>;
171
  label?: React.ReactNode;
172
  margin?: 'none' | 'dense' | 'normal';
173
  multiline?: boolean;
174
  name?: string;
175
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
176
  placeholder?: string;
177
  required?: boolean;
178
  rows?: string | number;
179
  rowsMax?: string | number;
180
  select?: boolean;
181
  SelectProps?: Partial<SelectProps>;
182
  type?: string;
183
  value?: unknown;
184
  variant?: 'standard' | 'outlined' | 'filled';
185
}
186

187
type TextFieldClassKey = 'root';
188
```
189

190
**Usage Examples:**
191

192
```typescript
193
import { TextField } from '@material-ui/core';
194
import { useState } from 'react';
195

196
const [value, setValue] = useState('');
197

198
// Basic text field
199
<TextField
200
  label="Name"
201
  value={value}
202
  onChange={(e) => setValue(e.target.value)}
203
  margin="normal"
204
  fullWidth
205
/>
206

207
// Outlined variant with helper text
208
<TextField
209
  label="Email"
210
  type="email"
211
  variant="outlined"
212
  helperText="Enter your email address"
213
  required
214
  error={!value.includes('@')}
215
/>
216

217
// Multiline text field
218
<TextField
219
  label="Description"
220
  multiline
221
  rows={4}
222
  variant="filled"
223
  fullWidth
224
/>
225
```
226

227
### Checkbox
228

229
Checkbox input component for boolean selections.
230

231
```typescript { .api }
232
/**
233
 * Checkbox input component for boolean selections
234
 * @param props - Checkbox props
235
 * @returns Checkbox React component
236
 */
237
function Checkbox(props: CheckboxProps): JSX.Element;
238

239
interface CheckboxProps extends StandardProps<IconButtonProps, CheckboxClassKey> {
240
  checked?: boolean;
241
  checkedIcon?: React.ReactNode;
242
  color?: 'default' | 'primary' | 'secondary';
243
  defaultChecked?: boolean;
244
  disabled?: boolean;
245
  disableRipple?: boolean;
246
  icon?: React.ReactNode;
247
  id?: string;
248
  indeterminate?: boolean;
249
  indeterminateIcon?: React.ReactNode;
250
  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
251
  inputRef?: React.Ref<HTMLInputElement>;
252
  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
253
  required?: boolean;
254
  size?: 'small' | 'medium';
255
  value?: unknown;
256
}
257

258
type CheckboxClassKey = 'root' | 'checked' | 'disabled' | 'indeterminate' | 'colorPrimary' | 'colorSecondary';
259
```
260

261
### Radio Button
262

263
Radio button component for single selection from multiple options.
264

265
```typescript { .api }
266
/**
267
 * Radio button component for single selection from multiple options
268
 * @param props - Radio props
269
 * @returns Radio React component
270
 */
271
function Radio(props: RadioProps): JSX.Element;
272

273
interface RadioProps extends StandardProps<IconButtonProps, RadioClassKey> {
274
  checked?: boolean;
275
  checkedIcon?: React.ReactNode;
276
  color?: 'default' | 'primary' | 'secondary';
277
  disabled?: boolean;
278
  disableRipple?: boolean;
279
  icon?: React.ReactNode;
280
  id?: string;
281
  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
282
  inputRef?: React.Ref<HTMLInputElement>;
283
  name?: string;
284
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
285
  required?: boolean;
286
  size?: 'small' | 'medium';
287
  value?: unknown;
288
}
289

290
type RadioClassKey = 'root' | 'checked' | 'disabled' | 'colorPrimary' | 'colorSecondary';
291
```
292

293
### Radio Group
294

295
Container for grouping radio buttons with shared name and value management.
296

297
```typescript { .api }
298
/**
299
 * Container for grouping radio buttons with shared name and value management
300
 * @param props - Radio group props
301
 * @returns Radio group React component
302
 */
303
function RadioGroup(props: RadioGroupProps): JSX.Element;
304

305
interface RadioGroupProps extends StandardProps<FormGroupProps, RadioGroupClassKey> {
306
  defaultValue?: unknown;
307
  name?: string;
308
  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
309
  value?: unknown;
310
}
311

312
type RadioGroupClassKey = 'root' | 'row';
313
```
314

315
### Switch
316

317
Toggle switch component for boolean state changes.
318

319
```typescript { .api }
320
/**
321
 * Toggle switch component for boolean state changes
322
 * @param props - Switch props
323
 * @returns Switch React component
324
 */
325
function Switch(props: SwitchProps): JSX.Element;
326

327
interface SwitchProps extends StandardProps<IconButtonProps, SwitchClassKey> {
328
  checked?: boolean;
329
  checkedIcon?: React.ReactNode;
330
  color?: 'default' | 'primary' | 'secondary';
331
  defaultChecked?: boolean;
332
  disabled?: boolean;
333
  disableRipple?: boolean;
334
  edge?: 'start' | 'end' | false;
335
  icon?: React.ReactNode;
336
  id?: string;
337
  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
338
  inputRef?: React.Ref<HTMLInputElement>;
339
  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
340
  required?: boolean;
341
  size?: 'small' | 'medium';
342
  value?: unknown;
343
}
344

345
type SwitchClassKey = 'root' | 'edgeStart' | 'edgeEnd' | 'switchBase' | 'colorPrimary' | 'colorSecondary' | 'sizeSmall' | 'checked' | 'disabled' | 'input' | 'thumb' | 'track';
346
```
347

348
### Select
349

350
Dropdown selection component with native and enhanced variants.
351

352
```typescript { .api }
353
/**
354
 * Dropdown selection component with native and enhanced variants
355
 * @param props - Select props
356
 * @returns Select React component
357
 */
358
function Select<T = unknown>(props: SelectProps<T>): JSX.Element;
359

360
interface SelectProps<T = unknown> extends StandardProps<InputProps, SelectClassKey> {
361
  autoWidth?: boolean;
362
  children?: React.ReactNode;
363
  defaultValue?: T;
364
  displayEmpty?: boolean;
365
  IconComponent?: React.ComponentType<{ className: string }>;
366
  id?: string;
367
  input?: React.ReactElement<any, any>;
368
  inputProps?: object;
369
  MenuProps?: Partial<MenuProps>;
370
  multiple?: boolean;
371
  native?: boolean;
372
  onChange?: (event: React.ChangeEvent<{ name?: string; value: T }>, child: React.ReactNode) => void;
373
  onClose?: (event: React.SyntheticEvent<Element, Event>) => void;
374
  onOpen?: (event: React.SyntheticEvent<Element, Event>) => void;
375
  open?: boolean;
376
  renderValue?: (value: T) => React.ReactNode;
377
  SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;
378
  value?: T;
379
  variant?: 'standard' | 'outlined' | 'filled';
380
}
381

382
type SelectClassKey = 'root' | 'select' | 'filled' | 'outlined' | 'selectMenu' | 'disabled' | 'icon' | 'iconOpen' | 'iconFilled' | 'iconOutlined' | 'nativeInput';
383
```
384

385
### Native Select
386

387
Native HTML select element with Material-UI styling.
388

389
```typescript { .api }
390
/**
391
 * Native HTML select element with Material-UI styling
392
 * @param props - Native select props
393
 * @returns Native select React component
394
 */
395
function NativeSelect<T = unknown>(props: NativeSelectProps<T>): JSX.Element;
396

397
interface NativeSelectProps<T = unknown> extends StandardProps<InputProps, NativeSelectClassKey> {
398
  children?: React.ReactNode;
399
  IconComponent?: React.ComponentType<{ className: string }>;
400
  input?: React.ReactElement<any, any>;
401
  inputProps?: object;
402
  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
403
  value?: T;
404
  variant?: 'standard' | 'outlined' | 'filled';
405
}
406

407
type NativeSelectClassKey = 'root' | 'select' | 'filled' | 'outlined' | 'selectMenu' | 'disabled' | 'icon' | 'nativeInput';
408
```
409

410
### Form Controls
411

412
#### Form Control
413

414
Wrapper component providing context for form inputs.
415

416
```typescript { .api }
417
/**
418
 * Wrapper component providing context for form inputs
419
 * @param props - Form control props
420
 * @returns Form control React component
421
 */
422
function FormControl(props: FormControlProps): JSX.Element;
423

424
interface FormControlProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, FormControlClassKey> {
425
  children?: React.ReactNode;
426
  color?: 'primary' | 'secondary';
427
  component?: React.ElementType;
428
  disabled?: boolean;
429
  error?: boolean;
430
  focused?: boolean;
431
  fullWidth?: boolean;
432
  hiddenLabel?: boolean;
433
  margin?: 'none' | 'dense' | 'normal';
434
  required?: boolean;
435
  size?: 'small' | 'medium';
436
  variant?: 'standard' | 'outlined' | 'filled';
437
}
438

439
type FormControlClassKey = 'root' | 'marginNormal' | 'marginDense' | 'fullWidth';
440
```
441

442
#### Form Control Label
443

444
Associates a control with a caption.
445

446
```typescript { .api }
447
/**
448
 * Associates a control with a caption
449
 * @param props - Form control label props
450
 * @returns Form control label React component
451
 */
452
function FormControlLabel(props: FormControlLabelProps): JSX.Element;
453

454
interface FormControlLabelProps extends StandardProps<React.LabelHTMLAttributes<HTMLLabelElement>, FormControlLabelClassKey> {
455
  checked?: boolean;
456
  control: React.ReactElement<any, any>;
457
  disabled?: boolean;
458
  inputRef?: React.Ref<any>;
459
  label: React.ReactNode;
460
  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
461
  name?: string;
462
  onChange?: (event: React.SyntheticEvent, checked: boolean) => void;
463
  value?: unknown;
464
}
465

466
type FormControlLabelClassKey = 'root' | 'labelPlacementStart' | 'labelPlacementTop' | 'labelPlacementBottom' | 'disabled' | 'label';
467
```
468

469
#### Form Group
470

471
Groups form controls like checkboxes and radio buttons.
472

473
```typescript { .api }
474
/**
475
 * Groups form controls like checkboxes and radio buttons
476
 * @param props - Form group props
477
 * @returns Form group React component
478
 */
479
function FormGroup(props: FormGroupProps): JSX.Element;
480

481
interface FormGroupProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, FormGroupClassKey> {
482
  children?: React.ReactNode;
483
  row?: boolean;
484
}
485

486
type FormGroupClassKey = 'root' | 'row';
487
```
488

489
#### Form Helper Text
490

491
Helper text for form inputs providing additional information or validation messages.
492

493
```typescript { .api }
494
/**
495
 * Helper text for form inputs providing additional information or validation messages
496
 * @param props - Form helper text props
497
 * @returns Form helper text React component
498
 */
499
function FormHelperText(props: FormHelperTextProps): JSX.Element;
500

501
interface FormHelperTextProps extends StandardProps<React.HTMLAttributes<HTMLParagraphElement>, FormHelperTextClassKey> {
502
  children?: React.ReactNode;
503
  component?: React.ElementType;
504
  disabled?: boolean;
505
  error?: boolean;
506
  filled?: boolean;
507
  focused?: boolean;
508
  margin?: 'dense';
509
  required?: boolean;
510
  variant?: 'standard' | 'outlined' | 'filled';
511
}
512

513
type FormHelperTextClassKey = 'root' | 'error' | 'disabled' | 'marginDense' | 'focused' | 'filled' | 'contained' | 'required';
514
```
515

516
#### Form Label
517

518
Label component for form controls.
519

520
```typescript { .api }
521
/**
522
 * Label component for form controls
523
 * @param props - Form label props
524
 * @returns Form label React component
525
 */
526
function FormLabel(props: FormLabelProps): JSX.Element;
527

528
interface FormLabelProps extends StandardProps<React.LabelHTMLAttributes<HTMLLabelElement>, FormLabelClassKey> {
529
  children?: React.ReactNode;
530
  color?: 'primary' | 'secondary';
531
  component?: React.ElementType;
532
  disabled?: boolean;
533
  error?: boolean;
534
  filled?: boolean;
535
  focused?: boolean;
536
  required?: boolean;
537
}
538

539
type FormLabelClassKey = 'root' | 'colorSecondary' | 'focused' | 'disabled' | 'error' | 'filled' | 'required' | 'asterisk';
540
```
541

542
### Base Input Components
543

544
#### Input Base
545

546
Unstyled input component that serves as the foundation for other input components.
547

548
```typescript { .api }
549
/**
550
 * Unstyled input component that serves as the foundation for other input components
551
 * @param props - Input base props
552
 * @returns Input base React component
553
 */
554
function InputBase(props: InputBaseProps): JSX.Element;
555

556
interface InputBaseProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, InputBaseClassKey> {
557
  autoComplete?: string;
558
  autoFocus?: boolean;
559
  color?: 'primary' | 'secondary';
560
  defaultValue?: unknown;
561
  disabled?: boolean;
562
  endAdornment?: React.ReactNode;
563
  error?: boolean;
564
  fullWidth?: boolean;
565
  id?: string;
566
  inputComponent?: React.ElementType;
567
  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
568
  inputRef?: React.Ref<any>;
569
  margin?: 'dense';
570
  multiline?: boolean;
571
  name?: string;
572
  onChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
573
  placeholder?: string;
574
  readOnly?: boolean;
575
  required?: boolean;
576
  rows?: string | number;
577
  rowsMax?: string | number;
578
  rowsMin?: string | number;
579
  startAdornment?: React.ReactNode;
580
  type?: string;
581
  value?: unknown;
582
}
583

584
type InputBaseClassKey = 'root' | 'formControl' | 'focused' | 'disabled' | 'adornedStart' | 'adornedEnd' | 'error' | 'marginDense' | 'multiline' | 'colorSecondary' | 'fullWidth' | 'input' | 'inputMarginDense' | 'inputMultiline' | 'inputTypeSearch' | 'inputAdornedStart' | 'inputAdornedEnd' | 'inputHiddenLabel';
585
```
586

587
#### Input
588

589
Standard input component with Material Design styling.
590

591
```typescript { .api }
592
/**
593
 * Standard input component with Material Design styling
594
 * @param props - Input props
595
 * @returns Input React component
596
 */
597
function Input(props: InputProps): JSX.Element;
598

599
interface InputProps extends StandardProps<InputBaseProps, InputClassKey> {
600
  disableUnderline?: boolean;
601
}
602

603
type InputClassKey = 'root' | 'formControl' | 'focused' | 'disabled' | 'colorSecondary' | 'underline' | 'error' | 'marginDense' | 'multiline' | 'fullWidth' | 'input' | 'inputMarginDense' | 'inputMultiline' | 'inputTypeSearch' | 'inputAdornedStart' | 'inputAdornedEnd' | 'inputHiddenLabel';
604
```
605

606
#### Filled Input
607

608
Filled variant input component.
609

610
```typescript { .api }
611
/**
612
 * Filled variant input component
613
 * @param props - Filled input props
614
 * @returns Filled input React component
615
 */
616
function FilledInput(props: FilledInputProps): JSX.Element;
617

618
interface FilledInputProps extends StandardProps<InputBaseProps, FilledInputClassKey> {
619
  disableUnderline?: boolean;
620
}
621

622
type FilledInputClassKey = 'root' | 'colorSecondary' | 'underline' | 'focused' | 'disabled' | 'adornedStart' | 'adornedEnd' | 'error' | 'marginDense' | 'multiline' | 'input' | 'inputMarginDense' | 'inputHiddenLabel' | 'inputMultiline' | 'inputAdornedStart' | 'inputAdornedEnd';
623
```
624

625
#### Outlined Input
626

627
Outlined variant input component.
628

629
```typescript { .api }
630
/**
631
 * Outlined variant input component
632
 * @param props - Outlined input props
633
 * @returns Outlined input React component
634
 */
635
function OutlinedInput(props: OutlinedInputProps): JSX.Element;
636

637
interface OutlinedInputProps extends StandardProps<InputBaseProps, OutlinedInputClassKey> {
638
  labelWidth?: number;
639
  notched?: boolean;
640
}
641

642
type OutlinedInputClassKey = 'root' | 'colorSecondary' | 'focused' | 'disabled' | 'adornedStart' | 'adornedEnd' | 'error' | 'marginDense' | 'multiline' | 'notchedOutline' | 'input' | 'inputMarginDense' | 'inputMultiline' | 'inputAdornedStart' | 'inputAdornedEnd';
643
```
644

645
### IconButton
646

647
Circular button component designed for icons, commonly used for actions in toolbars, app bars, and form controls.
648

649
```typescript { .api }
650
/**
651
 * Circular button component designed for icons
652
 * @param props - IconButton props
653
 * @returns IconButton React component
654
 */
655
function IconButton(props: IconButtonProps): JSX.Element;
656

657
interface IconButtonProps extends StandardProps<ButtonBaseProps, IconButtonClassKey> {
658
  children: React.ReactNode;
659
  color?: 'default' | 'inherit' | 'primary' | 'secondary';
660
  disabled?: boolean;
661
  disableRipple?: boolean;
662
  size?: 'small' | 'medium';
663
}
664

665
type IconButtonClassKey = 'root' | 'colorInherit' | 'colorPrimary' | 'colorSecondary' | 'disabled' | 'sizeSmall' | 'label';
666
```
667

668
**Usage Examples:**
669

670
```typescript
671
import { IconButton } from '@material-ui/core';
672
import { Delete as DeleteIcon, Edit as EditIcon } from '@material-ui/icons';
673

674
// Basic icon button
675
<IconButton>
676
  <DeleteIcon />
677
</IconButton>
678

679
// Colored icon button
680
<IconButton color="primary">
681
  <EditIcon />
682
</IconButton>
683

684
// Small icon button in toolbar
685
<IconButton size="small" color="secondary">
686
  <DeleteIcon />
687
</IconButton>
688
```
689

690
### InputAdornment
691

692
Component for adding icons or text to the start or end of input components to enhance functionality and visual appearance.
693

694
```typescript { .api }
695
/**
696
 * Component for adding icons or text to input components
697
 * @param props - InputAdornment props
698
 * @returns InputAdornment React component
699
 */
700
function InputAdornment(props: InputAdornmentProps): JSX.Element;
701

702
interface InputAdornmentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, InputAdornmentClassKey> {
703
  children: React.ReactNode;
704
  component?: React.ElementType;
705
  disablePointerEvents?: boolean;
706
  disableTypography?: boolean;
707
  position: 'start' | 'end';
708
  variant?: 'standard' | 'outlined' | 'filled';
709
}
710

711
type InputAdornmentClassKey = 'root' | 'filled' | 'positionStart' | 'positionEnd' | 'disablePointerEvents';
712
```
713

714
**Usage Examples:**
715

716
```typescript
717
import { TextField, InputAdornment, IconButton } from '@material-ui/core';
718
import { Search as SearchIcon, Visibility, VisibilityOff } from '@material-ui/icons';
719

720
// Text field with search icon
721
<TextField
722
  placeholder="Search..."
723
  InputProps={{
724
    startAdornment: (
725
      <InputAdornment position="start">
726
        <SearchIcon />
727
      </InputAdornment>
728
    ),
729
  }}
730
/>
731

732
// Password field with toggle visibility
733
<TextField
734
  type={showPassword ? 'text' : 'password'}
735
  InputProps={{
736
    endAdornment: (
737
      <InputAdornment position="end">
738
        <IconButton onClick={handleTogglePassword}>
739
          {showPassword ? <VisibilityOff /> : <Visibility />}
740
        </IconButton>
741
      </InputAdornment>
742
    ),
743
  }}
744
/>
745
```
746

747
### InputLabel
748

749
Component for providing accessible labels to input components, automatically styled based on the input variant and state.
750

751
```typescript { .api }
752
/**
753
 * Component for providing accessible labels to input components
754
 * @param props - InputLabel props
755
 * @returns InputLabel React component
756
 */
757
function InputLabel(props: InputLabelProps): JSX.Element;
758

759
interface InputLabelProps extends StandardProps<FormLabelProps, InputLabelClassKey> {
760
  children?: React.ReactNode;
761
  disableAnimation?: boolean;
762
  focused?: boolean;
763
  margin?: 'dense';
764
  required?: boolean;
765
  shrink?: boolean;
766
  variant?: 'standard' | 'outlined' | 'filled';
767
}
768

769
type InputLabelClassKey = 'root' | 'focused' | 'disabled' | 'error' | 'required' | 'asterisk' | 'formControl' | 'marginDense' | 'shrink' | 'animated' | 'filled' | 'outlined';
770
```
771

772
**Usage Examples:**
773

774
```typescript
775
import { FormControl, InputLabel, Input } from '@material-ui/core';
776

777
// Basic labeled input
778
<FormControl>
779
  <InputLabel htmlFor="email-input">Email Address</InputLabel>
780
  <Input id="email-input" type="email" />
781
</FormControl>
782

783
// Outlined variant with shrinking label
784
<FormControl variant="outlined">
785
  <InputLabel shrink htmlFor="name-input">
786
    Full Name
787
  </InputLabel>
788
  <OutlinedInput id="name-input" labelWidth={80} />
789
</FormControl>
790
```