0
# Input Controls
1

2
Interactive input components including buttons, sliders, switches, and advanced controls like autocomplete.
3

4
## Capabilities
5

6
### Button
7

8
Button component with multiple variants, sizes, and states.
9

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

18
interface ButtonProps extends CommonProps {
19
  /** The color of the component */
20
  color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
21
  /** If true, the component is disabled */
22
  disabled?: boolean;
23
  /** If true, no elevation is used */
24
  disableElevation?: boolean;
25
  /** Element placed after the children */
26
  endIcon?: React.ReactNode;
27
  /** If true, the button will take up the full width of its container */
28
  fullWidth?: boolean;
29
  /** The URL to link to when the button is clicked */
30
  href?: string;
31
  /** If true, the button is in loading state */
32
  loading?: boolean;
33
  /** Element to display when loading is true */
34
  loadingIndicator?: React.ReactNode;
35
  /** The size of the component */
36
  size?: 'small' | 'medium' | 'large';
37
  /** Element placed before the children */
38
  startIcon?: React.ReactNode;
39
  /** The variant to use */
40
  variant?: 'text' | 'outlined' | 'contained';
41
  /** Callback fired when the button is clicked */
42
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
43
  children?: React.ReactNode;
44
}
45
```
46

47
**Usage Examples:**
48

49
```typescript
50
import { Button, Stack } from "@mui/material";
51
import SaveIcon from "@mui/icons-material/Save";
52

53
// Basic buttons
54
<Stack direction="row" spacing={2}>
55
  <Button variant="text">Text Button</Button>
56
  <Button variant="outlined">Outlined Button</Button>
57
  <Button variant="contained">Contained Button</Button>
58
</Stack>
59

60
// Button with icons
61
<Button
62
  variant="contained"
63
  startIcon={<SaveIcon />}
64
  onClick={handleSave}
65
>
66
  Save Document
67
</Button>
68

69
// Loading button
70
<Button
71
  variant="contained"
72
  loading={isLoading}
73
  loadingIndicator="Saving..."
74
  onClick={handleSubmit}
75
>
76
  Submit Form
77
</Button>
78
```
79

80
### Slider
81

82
Slider component for selecting values from a range.
83

84
```typescript { .api }
85
/**
86
 * Slider for selecting values from range
87
 * @param props - Slider configuration
88
 * @returns Slider component
89
 */
90
function Slider(props: SliderProps): JSX.Element;
91

92
interface SliderProps extends CommonProps {
93
  /** The color of the component */
94
  color?: 'primary' | 'secondary';
95
  /** The default value */
96
  defaultValue?: number | number[];
97
  /** If true, the component is disabled */
98
  disabled?: boolean;
99
  /** Marks indicate predetermined values */
100
  marks?: boolean | Mark[];
101
  /** The maximum allowed value */
102
  max?: number;
103
  /** The minimum allowed value */
104
  min?: number;
105
  /** Callback when the slider's value changed */
106
  onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
107
  /** Callback when the mouseup is triggered */
108
  onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void;
109
  /** The component orientation */
110
  orientation?: 'horizontal' | 'vertical';
111
  /** The size of the slider */
112
  size?: 'small' | 'medium';
113
  /** The granularity step */
114
  step?: number | null;
115
  /** The value of the slider */
116
  value?: number | number[];
117
  /** Controls when the value label is displayed */
118
  valueLabelDisplay?: 'on' | 'auto' | 'off';
119
}
120

121
interface Mark {
122
  value: number;
123
  label?: React.ReactNode;
124
}
125
```
126

127
### Switch
128

129
Switch toggle control for binary states.
130

131
```typescript { .api }
132
/**
133
 * Switch toggle control
134
 * @param props - Switch configuration
135
 * @returns Switch component
136
 */
137
function Switch(props: SwitchProps): JSX.Element;
138

139
interface SwitchProps extends CommonProps {
140
  /** If true, the component is checked */
141
  checked?: boolean;
142
  /** The color of the component */
143
  color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default';
144
  /** The default checked state */
145
  defaultChecked?: boolean;
146
  /** If true, the component is disabled */
147
  disabled?: boolean;
148
  /** Callback fired when the state is changed */
149
  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
150
  /** The size of the component */
151
  size?: 'small' | 'medium';
152
  /** The value of the component */
153
  value?: unknown;
154
}
155
```
156

157
### Autocomplete
158

159
Autocomplete input component with suggestions and filtering.
160

161
```typescript { .api }
162
/**
163
 * Autocomplete input with suggestions
164
 * @param props - Autocomplete configuration
165
 * @returns Autocomplete component
166
 */
167
function Autocomplete<T>(props: AutocompleteProps<T>): JSX.Element;
168

169
interface AutocompleteProps<T> extends CommonProps {
170
  /** Array of options */
171
  options: T[];
172
  /** The value of the autocomplete */
173
  value?: T | T[] | null;
174
  /** Callback fired when the value changes */
175
  onChange?: (event: React.SyntheticEvent, value: T | T[] | null) => void;
176
  /** Callback fired when the input value changes */
177
  onInputChange?: (event: React.SyntheticEvent, value: string) => void;
178
  /** Render the input */
179
  renderInput: (params: AutocompleteRenderInputParams) => React.ReactNode;
180
  /** Render the option */
181
  renderOption?: (props: React.HTMLAttributes<HTMLLIElement>, option: T) => React.ReactNode;
182
  /** A filter function for options */
183
  filterOptions?: (options: T[], state: FilterOptionsState<T>) => T[];
184
  /** Used to determine the string value for an option */
185
  getOptionLabel?: (option: T) => string;
186
  /** If true, handles multiple values */
187
  multiple?: boolean;
188
  /** If true, user can add arbitrary values */
189
  freeSolo?: boolean;
190
  /** If true, the component is in loading state */
191
  loading?: boolean;
192
  /** Text to display when loading */
193
  loadingText?: React.ReactNode;
194
  /** Text to display when no options */
195
  noOptionsText?: React.ReactNode;
196
  /** If true, the component is disabled */
197
  disabled?: boolean;
198
}
199
```
200

201
**Usage Examples:**
202

203
```typescript
204
import { Autocomplete, TextField } from "@mui/material";
205

206
const countries = [
207
  { code: 'US', label: 'United States' },
208
  { code: 'CA', label: 'Canada' },
209
  { code: 'UK', label: 'United Kingdom' },
210
];
211

212
// Basic autocomplete
213
<Autocomplete
214
  options={countries}
215
  getOptionLabel={(option) => option.label}
216
  renderInput={(params) => (
217
    <TextField {...params} label="Country" variant="outlined" />
218
  )}
219
  onChange={(_, value) => setSelectedCountry(value)}
220
/>
221

222
// Multiple selection
223
<Autocomplete
224
  multiple
225
  options={skills}
226
  getOptionLabel={(option) => option.name}
227
  renderInput={(params) => (
228
    <TextField {...params} label="Skills" placeholder="Select skills" />
229
  )}
230
  onChange={(_, value) => setSelectedSkills(value)}
231
/>
232
```
233

234
### Rating
235

236
Star rating input component for collecting user ratings.
237

238
```typescript { .api }
239
/**
240
 * Star rating input for collecting user ratings
241
 * @param props - Rating configuration
242
 * @returns Rating component
243
 */
244
function Rating(props: RatingProps): JSX.Element;
245

246
interface RatingProps extends CommonProps {
247
  /** The default value. Use when the component is not controlled */
248
  defaultValue?: number;
249
  /** If true, the component is disabled */
250
  disabled?: boolean;
251
  /** The icon to display when empty */
252
  emptyIcon?: React.ReactNode;
253
  /** Accepts a function which returns a string value for the rating label */
254
  getLabelText?: (value: number) => string;
255
  /** If true, only the selected icon will be highlighted */
256
  highlightSelectedOnly?: boolean;
257
  /** The icon to display */
258
  icon?: React.ReactNode;
259
  /** Maximum rating */
260
  max?: number;
261
  /** The name attribute of the radio inputs */
262
  name?: string;
263
  /** Callback fired when the value changes */
264
  onChange?: (event: React.SyntheticEvent, value: number | null) => void;
265
  /** Callback fired when the hover state changes */
266
  onChangeActive?: (event: React.SyntheticEvent, value: number) => void;
267
  /** The minimum increment value change allowed */
268
  precision?: number;
269
  /** Removes all hover effects and pointer events */
270
  readOnly?: boolean;
271
  /** The size of the component */
272
  size?: 'small' | 'medium' | 'large';
273
  /** The rating value */
274
  value?: number | null;
275
}
276
```
277

278
**Usage Examples:**
279

280
```typescript
281
import { Rating, Typography, Box } from "@mui/material";
282
import StarIcon from "@mui/icons-material/Star";
283

284
// Basic rating
285
<Rating name="simple-controlled" value={value} onChange={(_, newValue) => setValue(newValue)} />
286

287
// Read-only rating
288
<Rating name="read-only" value={4.5} readOnly />
289

290
// Custom icon rating
291
<Rating
292
  name="customized-empty"
293
  defaultValue={2}
294
  precision={0.5}
295
  emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
296
/>
297

298
// Rating with label
299
<Box component="fieldset" mb={3} borderColor="transparent">
300
  <Typography component="legend">Overall rating</Typography>
301
  <Rating
302
    name="overall-rating"
303
    value={rating}
304
    onChange={(_, newValue) => setRating(newValue)}
305
    getLabelText={(value) => `${value} Star${value !== 1 ? 's' : ''}`}
306
  />
307
</Box>
308
```
309

310
### ToggleButton
311

312
Toggle button components for selecting between mutually exclusive options.
313

314
```typescript { .api }
315
/**
316
 * Toggle button for binary selection
317
 * @param props - ToggleButton configuration
318
 * @returns ToggleButton component
319
 */
320
function ToggleButton(props: ToggleButtonProps): JSX.Element;
321

322
/**
323
 * Group of toggle buttons for exclusive selection
324
 * @param props - ToggleButtonGroup configuration
325
 * @returns ToggleButtonGroup component
326
 */
327
function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;
328

329
interface ToggleButtonProps extends CommonProps {
330
  /** The color of the button when it is selected */
331
  color?: 'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
332
  /** If true, the component is disabled */
333
  disabled?: boolean;
334
  /** If true, the component is selected */
335
  selected?: boolean;
336
  /** The size of the component */
337
  size?: 'small' | 'medium' | 'large';
338
  /** The value to associate with the button when selected */
339
  value: NonNullable<string | number>;
340
  children?: React.ReactNode;
341
}
342

343
interface ToggleButtonGroupProps extends CommonProps {
344
  /** The color of the button when it is selected */
345
  color?: 'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
346
  /** If true, only allow one of the child ToggleButton values to be selected */
347
  exclusive?: boolean;
348
  /** If true, the component is disabled */
349
  disabled?: boolean;
350
  /** If true, the button group will take up the full width of its container */
351
  fullWidth?: boolean;
352
  /** Callback fired when the value changes */
353
  onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
354
  /** The component orientation */
355
  orientation?: 'horizontal' | 'vertical';
356
  /** The size of the component */
357
  size?: 'small' | 'medium' | 'large';
358
  /** The currently selected value within the group or an array of selected values */
359
  value?: any;
360
  children?: React.ReactNode;
361
}
362
```
363

364
**Usage Examples:**
365

366
```typescript
367
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
368
import FormatBoldIcon from "@mui/icons-material/FormatBold";
369
import FormatItalicIcon from "@mui/icons-material/FormatItalic";
370
import FormatUnderlinedIcon from "@mui/icons-material/FormatUnderlined";
371

372
// Exclusive selection
373
const [alignment, setAlignment] = React.useState('left');
374

375
<ToggleButtonGroup
376
  value={alignment}
377
  exclusive
378
  onChange={(_, newAlignment) => setAlignment(newAlignment)}
379
>
380
  <ToggleButton value="left">Left</ToggleButton>
381
  <ToggleButton value="center">Center</ToggleButton>
382
  <ToggleButton value="right">Right</ToggleButton>
383
</ToggleButtonGroup>
384

385
// Multiple selection
386
const [formats, setFormats] = React.useState(['bold']);
387

388
<ToggleButtonGroup
389
  value={formats}
390
  onChange={(_, newFormats) => setFormats(newFormats)}
391
>
392
  <ToggleButton value="bold">
393
    <FormatBoldIcon />
394
  </ToggleButton>
395
  <ToggleButton value="italic">
396
    <FormatItalicIcon />
397
  </ToggleButton>
398
  <ToggleButton value="underlined">
399
    <FormatUnderlinedIcon />
400
  </ToggleButton>
401
</ToggleButtonGroup>
402
```
403

404
### IconButton
405

406
Button component for displaying icons with interaction capabilities.
407

408
```typescript { .api }
409
/**
410
 * Button component for displaying icons with interaction capabilities
411
 * @param props - IconButton configuration
412
 * @returns IconButton component
413
 */
414
function IconButton(props: IconButtonProps): JSX.Element;
415

416
interface IconButtonProps extends CommonProps {
417
  /** The color of the component */
418
  color?: 'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
419
  /** If true, the component is disabled */
420
  disabled?: boolean;
421
  /** If true, the keyboard focus ripple is disabled */
422
  disableFocusRipple?: boolean;
423
  /** Alignment adjustment for icon positioning */
424
  edge?: 'start' | 'end' | false;
425
  /** If true, the loading indicator is visible */
426
  loading?: boolean;
427
  /** Element to display when loading is true */
428
  loadingIndicator?: React.ReactNode;
429
  /** The size of the component */
430
  size?: 'small' | 'medium' | 'large';
431
  /** The icon element to display */
432
  children?: React.ReactNode;
433
  /** Callback fired when the button is clicked */
434
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
435
}
436
```
437

438
**Usage Examples:**
439

440
```typescript
441
import { IconButton } from "@mui/material";
442
import { Delete, Edit, Favorite } from "@mui/icons-material";
443

444
// Basic icon button
445
<IconButton color="primary">
446
  <Favorite />
447
</IconButton>
448

449
// Icon button with different sizes
450
<IconButton size="small">
451
  <Edit />
452
</IconButton>
453

454
// Disabled icon button
455
<IconButton disabled>
456
  <Delete />
457
</IconButton>
458

459
// Icon button with edge alignment
460
<IconButton edge="end" color="error">
461
  <Delete />
462
</IconButton>
463
```
464

465
### Fab (Floating Action Button)
466

467
Floating action button for primary actions that float above content.
468

469
```typescript { .api }
470
/**
471
 * Floating action button for primary actions that float above content
472
 * @param props - Fab configuration
473
 * @returns Fab component
474
 */
475
function Fab(props: FabProps): JSX.Element;
476

477
interface FabProps extends CommonProps {
478
  /** The color of the component */
479
  color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
480
  /** If true, the component is disabled */
481
  disabled?: boolean;
482
  /** If true, the keyboard focus ripple is disabled */
483
  disableFocusRipple?: boolean;
484
  /** If true, the ripple effect is disabled */
485
  disableRipple?: boolean;
486
  /** The URL to link to when clicked */
487
  href?: string;
488
  /** The size of the component */
489
  size?: 'small' | 'medium' | 'large';
490
  /** The variant to use */
491
  variant?: 'circular' | 'extended';
492
  /** The content of the component */
493
  children?: React.ReactNode;
494
  /** Callback fired when clicked */
495
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
496
}
497
```
498

499
**Usage Examples:**
500

501
```typescript
502
import { Fab } from "@mui/material";
503
import { Add, Edit, Navigation } from "@mui/icons-material";
504

505
// Basic floating action button
506
<Fab color="primary">
507
  <Add />
508
</Fab>
509

510
// Extended FAB with text
511
<Fab variant="extended" color="secondary">
512
  <Navigation sx={{ mr: 1 }} />
513
  Navigate
514
</Fab>
515

516
// Small FAB
517
<Fab size="small" color="error">
518
  <Edit />
519
</Fab>
520

521
// Disabled FAB
522
<Fab disabled>
523
  <Add />
524
</Fab>
525
```
526

527
### ButtonGroup
528

529
Component for grouping related buttons together.
530

531
```typescript { .api }
532
/**
533
 * Component for grouping related buttons together
534
 * @param props - ButtonGroup configuration
535
 * @returns ButtonGroup component
536
 */
537
function ButtonGroup(props: ButtonGroupProps): JSX.Element;
538

539
interface ButtonGroupProps extends CommonProps {
540
  /** The color of the component */
541
  color?: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
542
  /** If true, the component is disabled */
543
  disabled?: boolean;
544
  /** If true, no elevation is used */
545
  disableElevation?: boolean;
546
  /** If true, the button ripple effect is disabled */
547
  disableRipple?: boolean;
548
  /** If true, the buttons take up the full width */
549
  fullWidth?: boolean;
550
  /** The group orientation */
551
  orientation?: 'horizontal' | 'vertical';
552
  /** The size of the component */
553
  size?: 'small' | 'medium' | 'large';
554
  /** The variant to use */
555
  variant?: 'text' | 'outlined' | 'contained';
556
  /** The content of the component */
557
  children?: React.ReactNode;
558
}
559
```
560

561
**Usage Examples:**
562

563
```typescript
564
import { ButtonGroup, Button } from "@mui/material";
565

566
// Basic button group
567
<ButtonGroup variant="contained">
568
  <Button>One</Button>
569
  <Button>Two</Button>
570
  <Button>Three</Button>
571
</ButtonGroup>
572

573
// Vertical button group
574
<ButtonGroup orientation="vertical" variant="outlined">
575
  <Button>Top</Button>
576
  <Button>Middle</Button>
577
  <Button>Bottom</Button>
578
</ButtonGroup>
579

580
// Full width button group
581
<ButtonGroup fullWidth variant="text">
582
  <Button>First</Button>
583
  <Button>Second</Button>
584
</ButtonGroup>
585
```
586

587
### ButtonBase
588

589
Foundation component for building custom button components.
590

591
```typescript { .api }
592
/**
593
 * Foundation component for building custom button components
594
 * @param props - ButtonBase configuration
595
 * @returns ButtonBase component
596
 */
597
function ButtonBase(props: ButtonBaseProps): JSX.Element;
598

599
interface ButtonBaseProps extends CommonProps {
600
  /** A ref for imperative actions */
601
  action?: React.Ref<ButtonBaseActions>;
602
  /** If true, the ripples are centered */
603
  centerRipple?: boolean;
604
  /** The content of the component */
605
  children?: React.ReactNode;
606
  /** If true, the component is disabled */
607
  disabled?: boolean;
608
  /** If true, the keyboard focus ripple is disabled */
609
  disableFocusRipple?: boolean;
610
  /** If true, the ripple effect is disabled */
611
  disableRipple?: boolean;
612
  /** If true, the touch ripple effect is disabled */
613
  disableTouchRipple?: boolean;
614
  /** If true, the base will have a keyboard focus ripple */
615
  focusRipple?: boolean;
616
  /** The component used for the root node */
617
  component?: React.ElementType;
618
  /** Callback fired when clicked */
619
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
620
  /** Callback fired when focus is visible */
621
  onFocusVisible?: (event: React.FocusEvent<HTMLButtonElement>) => void;
622
}
623

624
interface ButtonBaseActions {
625
  focusVisible(): void;
626
}
627
```
628

629
**Usage Examples:**
630

631
```typescript
632
import { ButtonBase, Typography } from "@mui/material";
633

634
// Custom button using ButtonBase
635
<ButtonBase
636
  sx={{
637
    p: 2,
638
    border: '1px solid',
639
    borderColor: 'divider',
640
    borderRadius: 1,
641
    '&:hover': {
642
      backgroundColor: 'action.hover',
643
    },
644
  }}
645
>
646
  <Typography variant="body2">
647
    Custom Button
648
  </Typography>
649
</ButtonBase>
650

651
// ButtonBase as a link
652
<ButtonBase component="a" href="/profile" sx={{ p: 1 }}>
653
  Go to Profile
654
</ButtonBase>
655
```