0
# Input Components
1

2
Comprehensive form controls for building interactive forms and data entry interfaces, including text inputs, selection controls, and specialized input types.
3

4
## Capabilities
5

6
### TextField
7

8
Single-line and multi-line text input component with validation, error states, and accessibility features.
9

10
```typescript { .api }
11
/**
12
 * Text input component with validation and accessibility support
13
 */
14
function TextField(props: ITextFieldProps): JSX.Element;
15

16
interface ITextField {
17
  /** Set focus to the text field */
18
  focus(): void;
19
  /** Remove focus from the text field */
20
  blur(): void;
21
  /** Select all text in the field */
22
  select(): void;
23
  /** Set the selection start position */
24
  setSelectionStart(start: number): void;
25
  /** Set the selection end position */
26
  setSelectionEnd(end: number): void;
27
  /** Set the selection range */
28
  setSelectionRange(start: number, end: number): void;
29
}
30

31
interface ITextFieldProps {
32
  /** Reference to access component methods */
33
  componentRef?: IRefObject<ITextField>;
34
  /** Label text displayed above the input */
35
  label?: string;
36
  /** Current value of the input */
37
  value?: string;
38
  /** Default value for uncontrolled usage */
39
  defaultValue?: string;
40
  /** Placeholder text */
41
  placeholder?: string;
42
  /** Whether the input allows multiple lines */
43
  multiline?: boolean;
44
  /** Number of rows for multiline input */
45
  rows?: number;
46
  /** Maximum number of characters allowed */
47
  maxLength?: number;
48
  /** Whether the input is disabled */
49
  disabled?: boolean;
50
  /** Whether the input is read-only */
51
  readOnly?: boolean;
52
  /** Whether the input is required for form submission */
53
  required?: boolean;
54
  /** Error message to display below the input */
55
  errorMessage?: string;
56
  /** Description text displayed below the input */
57
  description?: string;
58
  /** Prefix displayed before the input text */
59
  prefix?: string;
60
  /** Suffix displayed after the input text */
61
  suffix?: string;
62
  /** Icon to display in the input */
63
  iconProps?: IIconProps;
64
  /** Whether to auto-adjust height for multiline inputs */
65
  autoAdjustHeight?: boolean;
66
  /** Whether to resize multiline inputs */
67
  resizable?: boolean;
68
  /** Whether to underline the input */
69
  underlined?: boolean;
70
  /** Whether to show a border around the input */
71
  borderless?: boolean;
72
  /** Input type (text, password, email, etc.) */
73
  type?: string;
74
  /** Whether to validate input on load */
75
  validateOnLoad?: boolean;
76
  /** Whether to validate input on focus out */
77
  validateOnFocusOut?: boolean;
78
  /** Whether to validate input on focus in */
79
  validateOnFocusIn?: boolean;
80
  /** Whether to defer validation until after user interaction */
81
  deferredValidationTime?: number;
82
  /** Callback fired when the value changes */
83
  onChange?: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
84
  /** Callback fired when the input receives focus */
85
  onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
86
  /** Callback fired when the input loses focus */
87
  onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
88
  /** Callback fired on key press */
89
  onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
90
  /** Callback fired on key down */
91
  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
92
  /** Callback fired on key up */
93
  onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
94
  /** Function to validate input and return error message */
95
  onGetErrorMessage?: (value: string) => string | Promise<string>;
96
  /** Function to notify when error message changes */
97
  onNotifyValidationResult?: (errorMessage: string, value: string | undefined) => void;
98
  /** Custom styles */
99
  styles?: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles>;
100
  /** Theme provided by higher-order component */
101
  theme?: ITheme;
102
  /** Additional CSS class */
103
  className?: string;
104
  /** ARIA label */
105
  ariaLabel?: string;
106
  /** Auto-complete attribute */
107
  autoComplete?: string;
108
}
109
```
110

111
**Usage Examples:**
112

113
```typescript
114
import React, { useState } from "react";
115
import { TextField } from "office-ui-fabric-react";
116

117
function BasicTextInput() {
118
  const [value, setValue] = useState("");
119

120
  return (
121
    <TextField
122
      label="Enter your name"
123
      value={value}
124
      onChange={(e, newValue) => setValue(newValue || "")}
125
      placeholder="Type here..."
126
      required
127
    />
128
  );
129
}
130

131
function MultilineTextInput() {
132
  const [description, setDescription] = useState("");
133

134
  return (
135
    <TextField
136
      label="Description"
137
      multiline
138
      rows={4}
139
      value={description}
140
      onChange={(e, newValue) => setDescription(newValue || "")}
141
      placeholder="Enter a description..."
142
      maxLength={500}
143
      autoAdjustHeight
144
    />
145
  );
146
}
147

148
function ValidatedTextInput() {
149
  const [email, setEmail] = useState("");
150

151
  const validateEmail = (value: string): string => {
152
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
153
    return emailRegex.test(value) ? "" : "Please enter a valid email address";
154
  };
155

156
  return (
157
    <TextField
158
      label="Email Address"
159
      type="email"
160
      value={email}
161
      onChange={(e, newValue) => setEmail(newValue || "")}
162
      onGetErrorMessage={validateEmail}
163
      validateOnFocusOut
164
      required
165
    />
166
  );
167
}
168
```
169

170
### SearchBox
171

172
Specialized text input optimized for search scenarios with search icon and clear functionality.
173

174
```typescript { .api }
175
/**
176
 * Search input component with built-in search and clear functionality
177
 */
178
function SearchBox(props: ISearchBoxProps): JSX.Element;
179

180
interface ISearchBox {
181
  /** Set focus to the search box */
182
  focus(): void;
183
  /** Clear the search box value */
184
  clear(): void;
185
}
186

187
interface ISearchBoxProps {
188
  /** Reference to access component methods */
189
  componentRef?: IRefObject<ISearchBox>;
190
  /** Current search value */
191
  value?: string;
192
  /** Default value for uncontrolled usage */
193
  defaultValue?: string;
194
  /** Placeholder text */
195
  placeholder?: string;
196
  /** Whether the search box is disabled */
197
  disabled?: boolean;
198
  /** Whether to show the search icon */
199
  showIcon?: boolean;
200
  /** Whether the search box is underlined */
201
  underlined?: boolean;
202
  /** Delay in milliseconds before firing onChange */
203
  debounceTime?: number;
204
  /** Callback fired when search value changes */
205
  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, newValue?: string) => void;
206
  /** Callback fired when search is cleared */
207
  onClear?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
208
  /** Callback fired when search is submitted */
209
  onSearch?: (newValue: any) => void;
210
  /** Callback fired when escape key is pressed */
211
  onEscape?: (ev?: React.KeyboardEvent<HTMLInputElement>) => void;
212
  /** Callback fired when focus changes */
213
  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
214
  /** Callback fired when blur occurs */
215
  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
216
  /** Custom styles */
217
  styles?: IStyleFunctionOrObject<ISearchBoxStyleProps, ISearchBoxStyles>;
218
  /** Theme provided by higher-order component */
219
  theme?: ITheme;
220
  /** Additional CSS class */
221
  className?: string;
222
}
223
```
224

225
### Dropdown
226

227
Single and multi-select dropdown component with keyboard navigation and customizable options.
228

229
```typescript { .api }
230
/**
231
 * Dropdown selection component supporting single and multi-select modes
232
 */
233
function Dropdown(props: IDropdownProps): JSX.Element;
234

235
interface IDropdown {
236
  /** Currently selected options */
237
  selectedOptions: IDropdownOption[];
238
  /** Set focus to the dropdown */
239
  focus(): void;
240
}
241

242
interface IDropdownProps {
243
  /** Reference to access component methods */
244
  componentRef?: IRefObject<IDropdown>;
245
  /** Array of options to display */
246
  options: IDropdownOption[];
247
  /** Key of the selected option (single select) */
248
  selectedKey?: string | number | null;
249
  /** Array of keys for selected options (multi-select) */
250
  selectedKeys?: (string | number)[];
251
  /** Default selected key for uncontrolled usage */
252
  defaultSelectedKey?: string | number;
253
  /** Default selected keys for uncontrolled usage */
254
  defaultSelectedKeys?: (string | number)[];
255
  /** Whether to allow multiple selections */
256
  multiSelect?: boolean;
257
  /** Label text displayed above the dropdown */
258
  label?: string;
259
  /** Placeholder text when no option is selected */
260
  placeholder?: string;
261
  /** Whether the dropdown is disabled */
262
  disabled?: boolean;
263
  /** Whether the dropdown is required */
264
  required?: boolean;
265
  /** Error message to display below the dropdown */
266
  errorMessage?: string;
267
  /** Whether to show a border around the dropdown */
268
  bordered?: boolean;
269
  /** Custom render function for dropdown title */
270
  onRenderTitle?: (selectedOptions?: IDropdownOption[]) => React.ReactNode;
271
  /** Custom render function for individual options */
272
  onRenderOption?: (option?: IDropdownOption, defaultRender?: (props?: IDropdownOption) => React.ReactNode) => React.ReactNode;
273
  /** Custom render function for the dropdown caret */
274
  onRenderCaretDown?: IRenderFunction<IDropdownProps>;
275
  /** Custom render function for placeholder text */
276
  onRenderPlaceholder?: IRenderFunction<IDropdownProps>;
277
  /** Callback fired when selection changes */
278
  onChange?: (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) => void;
279
  /** Callback fired when dropdown opens or closes */
280
  onDismiss?: () => void;
281
  /** Custom styles */
282
  styles?: IStyleFunctionOrObject<IDropdownStyleProps, IDropdownStyles>;
283
  /** Theme provided by higher-order component */
284
  theme?: ITheme;
285
  /** Additional CSS class */
286
  className?: string;
287
  /** Callout properties for the dropdown menu */
288
  calloutProps?: ICalloutProps;
289
  /** Panel properties for responsive behavior */
290
  panelProps?: IPanelProps;
291
  /** Notification properties */
292
  notificationProps?: INotificationProps;
293
}
294

295
interface IDropdownOption {
296
  /** Unique key for the option */
297
  key: string | number;
298
  /** Display text for the option */
299
  text: string;
300
  /** Additional data associated with the option */
301
  data?: any;
302
  /** Whether the option is disabled */
303
  disabled?: boolean;
304
  /** Whether the option is hidden */
305
  hidden?: boolean;
306
  /** Whether the option is selected */
307
  selected?: boolean;
308
  /** Title attribute for the option */
309
  title?: string;
310
  /** ARIA label for the option */
311
  ariaLabel?: string;
312
  /** Type of option (header, divider, etc.) */
313
  itemType?: DropdownMenuItemType;
314
  /** Index of the option */
315
  index?: number;
316
}
317

318
enum DropdownMenuItemType {
319
  Normal = 0,
320
  Divider = 1,
321
  Header = 2
322
}
323
```
324

325
**Usage Examples:**
326

327
```typescript
328
import React, { useState } from "react";
329
import { Dropdown, IDropdownOption } from "office-ui-fabric-react";
330

331
function BasicDropdown() {
332
  const [selectedKey, setSelectedKey] = useState<string | number | undefined>();
333

334
  const options: IDropdownOption[] = [
335
    { key: "option1", text: "Option 1" },
336
    { key: "option2", text: "Option 2" },
337
    { key: "option3", text: "Option 3", disabled: true },
338
    { key: "option4", text: "Option 4" }
339
  ];
340

341
  return (
342
    <Dropdown
343
      label="Select an option"
344
      selectedKey={selectedKey}
345
      onChange={(e, option) => setSelectedKey(option?.key)}
346
      options={options}
347
      placeholder="Choose an option"
348
    />
349
  );
350
}
351

352
function MultiSelectDropdown() {
353
  const [selectedKeys, setSelectedKeys] = useState<(string | number)[]>([]);
354

355
  const options: IDropdownOption[] = [
356
    { key: "cat1", text: "Category 1" },
357
    { key: "cat2", text: "Category 2" },
358
    { key: "cat3", text: "Category 3" },
359
    { key: "cat4", text: "Category 4" }
360
  ];
361

362
  return (
363
    <Dropdown
364
      label="Select categories"
365
      multiSelect
366
      selectedKeys={selectedKeys}
367
      onChange={(e, option) => {
368
        if (option) {
369
          setSelectedKeys(prev => 
370
            option.selected 
371
              ? [...prev, option.key]
372
              : prev.filter(key => key !== option.key)
373
          );
374
        }
375
      }}
376
      options={options}
377
      placeholder="Choose categories"
378
    />
379
  );
380
}
381
```
382

383
### ComboBox
384

385
Editable dropdown that combines text input with dropdown selection, supporting both free text entry and predefined options.
386

387
```typescript { .api }
388
/**
389
 * Editable dropdown component combining text input with dropdown selection
390
 */
391
function ComboBox(props: IComboBoxProps): JSX.Element;
392

393
interface IComboBox {
394
  /** Set focus to the combo box */
395
  focus(): void;
396
  /** Dismiss any open callout */
397
  dismissMenu(): void;
398
}
399

400
interface IComboBoxProps {
401
  /** Reference to access component methods */
402
  componentRef?: IRefObject<IComboBox>;
403
  /** Array of options to display */
404
  options: IComboBoxOption[];
405
  /** Text value of the combo box */
406
  text?: string;
407
  /** Default text for uncontrolled usage */
408
  defaultText?: string;
409
  /** Currently selected key */
410
  selectedKey?: string | number | null;
411
  /** Default selected key for uncontrolled usage */
412
  defaultSelectedKey?: string | number | null;
413
  /** Whether to allow free form text entry */
414
  allowFreeform?: boolean;
415
  /** Whether to auto-complete text based on options */
416
  autoComplete?: "on" | "off";
417
  /** Label text displayed above the combo box */
418
  label?: string;
419
  /** Placeholder text */
420
  placeholder?: string;
421
  /** Whether the combo box is disabled */
422
  disabled?: boolean;
423
  /** Whether the combo box is required */
424
  required?: boolean;
425
  /** Error message to display */
426
  errorMessage?: string;
427
  /** Whether to open menu on focus */
428
  openOnKeyboardFocus?: boolean;
429
  /** Whether to use the combo box as a menu only (no text input) */
430
  useComboBoxAsMenuWidth?: boolean;
431
  /** Custom render function for options */
432
  onRenderOption?: (option: IComboBoxOption) => React.ReactNode;
433
  /** Custom render function for the input field */
434
  onRenderInput?: (props: IComboBoxProps) => React.ReactNode;
435
  /** Callback fired when text changes */
436
  onChange?: (event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number, value?: string) => void;
437
  /** Callback fired when input receives focus */
438
  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
439
  /** Callback fired when input loses focus */
440
  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
441
  /** Callback fired when dropdown opens */
442
  onMenuOpen?: () => void;
443
  /** Callback fired when dropdown closes */
444
  onMenuDismissed?: () => void;
445
  /** Callback fired to resolve suggestions dynamically */
446
  onResolveOptions?: (options: IComboBoxOption[], filter: string) => IComboBoxOption[] | Promise<IComboBoxOption[]>;
447
  /** Custom styles */
448
  styles?: IStyleFunctionOrObject<IComboBoxStyleProps, IComboBoxStyles>;
449
  /** Theme provided by higher-order component */
450
  theme?: ITheme;
451
  /** Additional CSS class */
452
  className?: string;
453
}
454

455
interface IComboBoxOption {
456
  /** Unique key for the option */
457
  key: string | number;
458
  /** Display text for the option */
459
  text: string;
460
  /** Additional data associated with the option */
461
  data?: any;
462
  /** Whether the option is disabled */
463
  disabled?: boolean;
464
  /** Whether the option is hidden */
465
  hidden?: boolean;
466
  /** Whether the option is selected */
467
  selected?: boolean;
468
  /** Type of option (header, divider, etc.) */
469
  itemType?: ComboBoxMenuItemType;
470
  /** Index of the option */
471
  index?: number;
472
  /** ARIA label for the option */
473
  ariaLabel?: string;
474
  /** Title attribute for the option */
475
  title?: string;
476
}
477

478
enum ComboBoxMenuItemType {
479
  Normal = 0,
480
  Divider = 1,
481
  Header = 2
482
}
483
```
484

485
### Checkbox
486

487
Standard checkbox input component with support for indeterminate state and custom labels.
488

489
```typescript { .api }
490
/**
491
 * Checkbox input component with indeterminate state support
492
 */
493
function Checkbox(props: ICheckboxProps): JSX.Element;
494

495
interface ICheckbox {
496
  /** Set focus to the checkbox */
497
  focus(): void;
498
  /** Current checked state */
499
  checked: boolean;
500
  /** Current indeterminate state */
501
  indeterminate: boolean;
502
}
503

504
interface ICheckboxProps {
505
  /** Reference to access component methods */
506
  componentRef?: IRefObject<ICheckbox>;
507
  /** Whether the checkbox is checked */
508
  checked?: boolean;
509
  /** Default checked state for uncontrolled usage */
510
  defaultChecked?: boolean;
511
  /** Whether the checkbox is in indeterminate state */
512
  indeterminate?: boolean;
513
  /** Default indeterminate state for uncontrolled usage */
514
  defaultIndeterminate?: boolean;
515
  /** Label text for the checkbox */
516
  label?: string;
517
  /** Whether the checkbox is disabled */
518
  disabled?: boolean;
519
  /** Whether to reverse the label and checkbox positions */
520
  reversed?: boolean;
521
  /** Custom render function for the label */
522
  onRenderLabel?: IRenderFunction<ICheckboxProps>;
523
  /** Callback fired when checked state changes */
524
  onChange?: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void;
525
  /** Custom styles */
526
  styles?: IStyleFunctionOrObject<ICheckboxStyleProps, ICheckboxStyles>;
527
  /** Theme provided by higher-order component */
528
  theme?: ITheme;
529
  /** Additional CSS class */
530
  className?: string;
531
  /** HTML id attribute */
532
  id?: string;
533
  /** ARIA label */
534
  ariaLabel?: string;
535
  /** ARIA labelledby */
536
  ariaLabelledBy?: string;
537
  /** ARIA describedby */
538
  ariaDescribedBy?: string;
539
  /** Tab index */
540
  tabIndex?: number;
541
  /** Title attribute */
542
  title?: string;
543
}
544
```
545

546
### ChoiceGroup
547

548
Radio button group component for mutually exclusive selections.
549

550
```typescript { .api }
551
/**
552
 * Radio button group component for mutually exclusive selections
553
 */
554
function ChoiceGroup(props: IChoiceGroupProps): JSX.Element;
555

556
interface IChoiceGroup {
557
  /** Set focus to the choice group */
558
  focus(): void;
559
  /** Currently selected option */
560
  checkedOption: IChoiceGroupOption | undefined;
561
}
562

563
interface IChoiceGroupProps {
564
  /** Reference to access component methods */
565
  componentRef?: IRefObject<IChoiceGroup>;
566
  /** Array of choice options */
567
  options?: IChoiceGroupOption[];
568
  /** Key of the default selected option */
569
  defaultSelectedKey?: string | number;
570
  /** Key of the selected option */
571
  selectedKey?: string | number;
572
  /** Label for the choice group */
573
  label?: string;
574
  /** Whether the choice group is required */
575
  required?: boolean;
576
  /** Whether the choice group is disabled */
577
  disabled?: boolean;
578
  /** Custom render function for the label */
579
  onRenderLabel?: (props?: IChoiceGroupProps) => JSX.Element | null;
580
  /** Callback fired when selection changes */
581
  onChange?: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => void;
582
  /** Custom styles */
583
  styles?: IStyleFunctionOrObject<IChoiceGroupStyleProps, IChoiceGroupStyles>;
584
  /** Theme provided by higher-order component */
585
  theme?: ITheme;
586
  /** Additional CSS class */
587
  className?: string;
588
  /** ARIA labelledby */
589
  ariaLabelledBy?: string;
590
}
591

592
interface IChoiceGroupOption {
593
  /** Unique key for the option */
594
  key: string | number;
595
  /** Display text for the option */
596
  text: string;
597
  /** Whether the option is disabled */
598
  disabled?: boolean;
599
  /** Icon to display with the option */
600
  iconProps?: IIconProps;
601
  /** Image to display with the option */
602
  imageSrc?: string;
603
  /** Alt text for the image */
604
  imageAlt?: string;
605
  /** Custom render function for the label */
606
  onRenderLabel?: (props?: IChoiceGroupOption) => React.ReactNode;
607
  /** Custom render function for the field */
608
  onRenderField?: (props?: IChoiceGroupOption, defaultRender?: (props?: IChoiceGroupOption) => React.ReactNode) => React.ReactNode;
609
  /** ARIA label */
610
  ariaLabel?: string;
611
  /** HTML id attribute */
612
  id?: string;
613
  /** Label position relative to the option */
614
  labelId?: string;
615
  /** Custom styles for the option */
616
  styles?: Partial<IChoiceGroupOptionStyles>;
617
}
618
```
619

620
### Toggle
621

622
On/off switch control component with customizable labels and states.
623

624
```typescript { .api }
625
/**
626
 * Toggle switch component for boolean states
627
 */
628
function Toggle(props: IToggleProps): JSX.Element;
629

630
interface IToggle {
631
  /** Set focus to the toggle */
632
  focus(): void;
633
  /** Current checked state */
634
  checked: boolean;
635
}
636

637
interface IToggleProps {
638
  /** Reference to access component methods */
639
  componentRef?: IRefObject<IToggle>;
640
  /** Whether the toggle is checked */
641
  checked?: boolean;
642
  /** Default checked state for uncontrolled usage */
643
  defaultChecked?: boolean;
644
  /** Label text for the toggle */
645
  label?: string;
646
  /** Text to display when toggle is on */
647
  onText?: string;
648
  /** Text to display when toggle is off */
649
  offText?: string;
650
  /** ARIA label */
651
  ariaLabel?: string;
652
  /** Whether the toggle is disabled */
653
  disabled?: boolean;
654
  /** Whether the toggle is required */
655
  required?: boolean;
656
  /** Whether to inline the label and toggle */
657
  inlineLabel?: boolean;
658
  /** Custom render function for the label */
659
  onRenderLabel?: IRenderFunction<IToggleProps>;
660
  /** Callback fired when toggle state changes */
661
  onChange?: (event: React.MouseEvent<HTMLElement>, checked?: boolean) => void;
662
  /** Callback fired when toggle receives focus */
663
  onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
664
  /** Callback fired when toggle loses focus */
665
  onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
666
  /** Custom styles */
667
  styles?: IStyleFunctionOrObject<IToggleStyleProps, IToggleStyles>;
668
  /** Theme provided by higher-order component */
669
  theme?: ITheme;
670
  /** Additional CSS class */
671
  className?: string;
672
  /** HTML role attribute */
673
  role?: string;
674
}
675
```
676

677
### Slider
678

679
Range input slider component for selecting numeric values within a defined range.
680

681
```typescript { .api }
682
/**
683
 * Range slider component for numeric value selection
684
 */
685
function Slider(props: ISliderProps): JSX.Element;
686

687
interface ISlider {
688
  /** Set focus to the slider */
689
  focus(): void;
690
  /** Current value of the slider */
691
  value: number | undefined;
692
}
693

694
interface ISliderProps {
695
  /** Reference to access component methods */
696
  componentRef?: IRefObject<ISlider>;
697
  /** Current value of the slider */
698
  value?: number;
699
  /** Default value for uncontrolled usage */
700
  defaultValue?: number;
701
  /** Minimum value */
702
  min?: number;
703
  /** Maximum value */
704
  max?: number;
705
  /** Step increment */
706
  step?: number;
707
  /** Label text for the slider */
708
  label?: string;
709
  /** Whether to show the current value */
710
  showValue?: boolean;
711
  /** Whether the slider is disabled */
712
  disabled?: boolean;
713
  /** Whether the slider is vertical */
714
  vertical?: boolean;
715
  /** Whether to snap to step increments */
716
  snapToStep?: boolean;
717
  /** Custom render function for the label */
718
  onRenderLabel?: IRenderFunction<ISliderProps>;
719
  /** Callback fired when value changes */
720
  onChange?: (value: number) => void;
721
  /** Custom styles */
722
  styles?: IStyleFunctionOrObject<ISliderStyleProps, ISliderStyles>;
723
  /** Theme provided by higher-order component */
724
  theme?: ITheme;
725
  /** Additional CSS class */
726
  className?: string;
727
  /** ARIA label */
728
  ariaLabel?: string;
729
  /** ARIA labelledby */
730
  ariaLabelledBy?: string;
731
  /** ARIA valuetext function */
732
  ariaValueText?: (value: number) => string;
733
  /** Button properties for the slider thumb */
734
  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
735
}
736
```
737

738
### SpinButton
739

740
Numeric input component with increment and decrement buttons for precise value entry.
741

742
```typescript { .api }
743
/**
744
 * Numeric input component with increment/decrement buttons
745
 */
746
function SpinButton(props: ISpinButtonProps): JSX.Element;
747

748
interface ISpinButton {
749
  /** Set focus to the spin button */
750
  focus(): void;
751
  /** Current value of the spin button */
752
  value: string | undefined;
753
}
754

755
interface ISpinButtonProps {
756
  /** Reference to access component methods */
757
  componentRef?: IRefObject<ISpinButton>;
758
  /** Current value of the spin button */
759
  value?: string;
760
  /** Default value for uncontrolled usage */
761
  defaultValue?: string;
762
  /** Minimum value */
763
  min?: number;
764
  /** Maximum value */
765
  max?: number;
766
  /** Step increment */
767
  step?: number;
768
  /** Label text for the spin button */
769
  label?: string;
770
  /** Whether the spin button is disabled */
771
  disabled?: boolean;
772
  /** Icon properties for the increment button */
773
  incrementButtonIcon?: IIconProps;
774
  /** Icon properties for the decrement button */
775
  decrementButtonIcon?: IIconProps;
776
  /** ARIA label for the increment button */
777
  incrementButtonAriaLabel?: string;
778
  /** ARIA label for the decrement button */
779
  decrementButtonAriaLabel?: string;
780
  /** Custom validation function */
781
  onValidate?: (value: string, event?: React.SyntheticEvent<HTMLElement>) => string | void;
782
  /** Custom increment function */
783
  onIncrement?: (value: string) => string | void;
784
  /** Custom decrement function */
785
  onDecrement?: (value: string) => string | void;
786
  /** Callback fired when value changes */
787
  onChange?: (event: React.SyntheticEvent<HTMLElement>, newValue?: string) => void;
788
  /** Callback fired when focus is received */
789
  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
790
  /** Callback fired when focus is lost */
791
  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
792
  /** Custom styles */
793
  styles?: IStyleFunctionOrObject<ISpinButtonStyleProps, ISpinButtonStyles>;
794
  /** Theme provided by higher-order component */
795
  theme?: ITheme;
796
  /** Additional CSS class */
797
  className?: string;
798
  /** ARIA label */
799
  ariaLabel?: string;
800
  /** ARIA labelledby */
801
  ariaLabelledBy?: string;
802
  /** ARIA describedby */
803
  ariaDescribedBy?: string;
804
  /** Precision for decimal values */
805
  precision?: number;
806
}
807
```
808

809
### Rating
810

811
Star rating input component for collecting user ratings and feedback.
812

813
```typescript { .api }
814
/**
815
 * Star rating input component for user feedback
816
 */
817
function Rating(props: IRatingProps): JSX.Element;
818

819
interface IRating {
820
  /** Current rating value */
821
  rating: number | null;
822
}
823

824
interface IRatingProps {
825
  /** Reference to access component methods */
826
  componentRef?: IRefObject<IRating>;
827
  /** Current rating value */
828
  rating?: number;
829
  /** Default rating for uncontrolled usage */
830
  defaultRating?: number;
831
  /** Maximum rating value */
832
  max?: number;
833
  /** Whether to allow zero rating */
834
  allowZeroStars?: boolean;
835
  /** Size of the rating control */
836
  size?: RatingSize;
837
  /** Whether the rating is disabled */
838
  disabled?: boolean;
839
  /** Whether the rating is read-only */
840
  readOnly?: boolean;
841
  /** Icon to use for filled stars */
842
  icon?: string;
843
  /** Icon to use for unfilled stars */
844
  unselectedIcon?: string;
845
  /** Custom render function for rating stars */
846
  onRenderStar?: (props: IRatingStarProps) => React.ReactNode;
847
  /** Callback fired when rating changes */
848
  onChange?: (event: React.FocusEvent<HTMLElement>, rating?: number) => void;
849
  /** Custom styles */
850
  styles?: IStyleFunctionOrObject<IRatingStyleProps, IRatingStyles>;
851
  /** Theme provided by higher-order component */
852
  theme?: ITheme;
853
  /** Additional CSS class */
854
  className?: string;
855
  /** ARIA label */
856
  ariaLabel?: string;
857
  /** ARIA labelledby */
858
  ariaLabelledBy?: string;
859
  /** Function to generate ARIA label for each star */
860
  getAriaLabel?: (rating: number, max: number) => string;
861
}
862

863
enum RatingSize {
864
  Small = 0,
865
  Large = 1
866
}
867

868
interface IRatingStarProps {
869
  /** Whether the star is filled */
870
  fillPercentage: number;
871
  /** Whether the star is disabled */
872
  disabled?: boolean;
873
  /** Whether the star is selected */
874
  selected?: boolean;
875
  /** Icon name for the star */
876
  icon?: string;
877
  /** Unique ID for the star */
878
  id: string;
879
}
880
```
881

882
**Usage Examples:**
883

884
```typescript
885
import React, { useState } from "react";
886
import { Rating, RatingSize } from "office-ui-fabric-react";
887

888
function BasicRating() {
889
  const [rating, setRating] = useState<number>(0);
890

891
  return (
892
    <Rating
893
      rating={rating}
894
      onChange={(e, newRating) => setRating(newRating || 0)}
895
      max={5}
896
      ariaLabel="Rate this item"
897
    />
898
  );
899
}
900

901
function LargeRating() {
902
  const [rating, setRating] = useState<number>(3);
903

904
  return (
905
    <Rating
906
      rating={rating}
907
      onChange={(e, newRating) => setRating(newRating || 0)}
908
      size={RatingSize.Large}
909
      max={5}
910
      allowZeroStars
911
      ariaLabel="Product rating"
912
    />
913
  );
914
}
915
```
916

917
## Types
918

919
```typescript { .api }
920
// Common input component interfaces
921
interface IStyleFunctionOrObject<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> {
922
  (props: TStylesProps): Partial<TStyleSet>;
923
}
924

925
interface IRefObject<T> {
926
  (ref: T | null): void;
927
}
928

929
interface IRenderFunction<TProps> {
930
  (props?: TProps, defaultRender?: (props?: TProps) => React.ReactNode | null): React.ReactNode | null;
931
}
932

933
// Icon interface used across components
934
interface IIconProps {
935
  iconName?: string;
936
  ariaLabel?: string;
937
  title?: string;
938
  className?: string;
939
  imageProps?: React.ImgHTMLAttributes<HTMLImageElement>;
940
  imageErrorAs?: React.ComponentType<React.ImgHTMLAttributes<HTMLImageElement>>;
941
  styles?: IStyleFunctionOrObject<IIconStyleProps, IIconStyles>;
942
  theme?: ITheme;
943
}
944

945
// Theme interface
946
interface ITheme {
947
  palette: IPalette;
948
  fonts: IFontStyles;
949
  semanticColors: ISemanticColors;
950
  spacing: ISpacing;
951
  effects: IEffects;
952
  isInverted?: boolean;
953
  disableGlobalClassNames?: boolean;
954
}
955
```