0
# Form Components
1

2
Comprehensive form input components with validation, formatting, and accessibility support for building interactive user interfaces.
3

4
## Capabilities
5

6
### Button
7

8
Primary action component for user interactions with customizable appearance and behavior.
9

10
```typescript { .api }
11
/**
12
 * Button component for user actions
13
 * @param props - Button configuration options
14
 * @returns JSX element
15
 */
16
function Button(props: ButtonProps): JSX.Element;
17

18
interface ButtonProps {
19
  /** Button label text */
20
  label?: string;
21
  /** Button icon (PrimeIcon class or React node) */
22
  icon?: string | React.ReactNode;
23
  /** Icon position relative to label */
24
  iconPos?: 'left' | 'right' | 'top' | 'bottom';
25
  /** Loading state with spinner */
26
  loading?: boolean;
27
  /** Disabled state */
28
  disabled?: boolean;
29
  /** Visual severity level */
30
  severity?: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'secondary' | 'contrast';
31
  /** Button size */
32
  size?: 'small' | 'large';
33
  /** Display as text-only button */
34
  text?: boolean;
35
  /** Display as outlined button */
36
  outlined?: boolean;
37
  /** Display as rounded button */
38
  rounded?: boolean;
39
  /** Display as raised button */
40
  raised?: boolean;
41
  /** Click event handler */
42
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
43
  /** CSS class name */
44
  className?: string;
45
  /** Inline styles */
46
  style?: React.CSSProperties;
47
  /** Passthrough options for DOM customization */
48
  pt?: ButtonPassThroughOptions;
49
}
50

51
interface ButtonPassThroughOptions {
52
  root?: object;
53
  loadingIcon?: object;
54
  icon?: object;
55
  label?: object;
56
}
57
```
58

59
**Usage Examples:**
60

61
```typescript
62
import { Button } from "primereact/button";
63

64
// Basic button
65
<Button label="Submit" />
66

67
// Button with icon
68
<Button label="Save" icon="pi pi-save" />
69

70
// Loading button
71
<Button label="Processing..." loading />
72

73
// Severity variants
74
<Button label="Delete" severity="danger" />
75
<Button label="Cancel" severity="secondary" outlined />
76
```
77

78
### InputText
79

80
Text input component for single-line text entry with validation and formatting support.
81

82
```typescript { .api }
83
/**
84
 * Text input component
85
 * @param props - Input configuration options
86
 * @returns JSX element
87
 */
88
function InputText(props: InputTextProps): JSX.Element;
89

90
interface InputTextProps {
91
  /** Current input value */
92
  value?: string;
93
  /** Change event handler */
94
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
95
  /** Placeholder text */
96
  placeholder?: string;
97
  /** Disabled state */
98
  disabled?: boolean;
99
  /** Invalid state for validation */
100
  invalid?: boolean;
101
  /** Input size */
102
  size?: 'small' | 'large';
103
  /** HTML input type */
104
  type?: string;
105
  /** Maximum length */
106
  maxLength?: number;
107
  /** CSS class name */
108
  className?: string;
109
  /** Inline styles */
110
  style?: React.CSSProperties;
111
  /** Passthrough options */
112
  pt?: PassThroughOptions;
113
}
114
```
115

116
### Calendar
117

118
Date and time picker component with flexible formatting and selection modes.
119

120
```typescript { .api }
121
/**
122
 * Date/time picker component
123
 * @param props - Calendar configuration options
124
 * @returns JSX element
125
 */
126
function Calendar(props: CalendarProps): JSX.Element;
127

128
interface CalendarProps {
129
  /** Selected date value */
130
  value?: Date | Date[];
131
  /** Change event handler */
132
  onChange?: (e: CalendarChangeEvent) => void;
133
  /** Date format pattern */
134
  dateFormat?: string;
135
  /** Selection mode */
136
  selectionMode?: 'single' | 'multiple' | 'range';
137
  /** Time selection enabled */
138
  showTime?: boolean;
139
  /** Time format (12/24 hour) */
140
  hourFormat?: '12' | '24';
141
  /** Inline calendar display */
142
  inline?: boolean;
143
  /** Minimum selectable date */
144
  minDate?: Date;
145
  /** Maximum selectable date */
146
  maxDate?: Date;
147
  /** Disabled dates */
148
  disabledDates?: Date[];
149
  /** Disabled days of week (0-6) */
150
  disabledDays?: number[];
151
  /** Show other months in calendar */
152
  showOtherMonths?: boolean;
153
  /** Allow other month selection */
154
  selectOtherMonths?: boolean;
155
  /** Placeholder text */
156
  placeholder?: string;
157
  /** Disabled state */
158
  disabled?: boolean;
159
  /** CSS class name */
160
  className?: string;
161
  /** Passthrough options */
162
  pt?: PassThroughOptions;
163
}
164

165
interface CalendarChangeEvent {
166
  originalEvent: React.SyntheticEvent;
167
  value: Date | Date[];
168
}
169
```
170

171
### Dropdown
172

173
Select dropdown component for single value selection from a list of options.
174

175
```typescript { .api }
176
/**
177
 * Dropdown selection component
178
 * @param props - Dropdown configuration options
179
 * @returns JSX element
180
 */
181
function Dropdown<T = any>(props: DropdownProps<T>): JSX.Element;
182

183
interface DropdownProps<T = any> {
184
  /** Selected value */
185
  value?: T;
186
  /** Available options */
187
  options?: T[];
188
  /** Property name for option value */
189
  optionValue?: string;
190
  /** Property name for option label */
191
  optionLabel?: string;
192
  /** Template function for option rendering */
193
  itemTemplate?: (option: T) => React.ReactNode;
194
  /** Change event handler */
195
  onChange?: (e: DropdownChangeEvent<T>) => void;
196
  /** Filter enabled */
197
  filter?: boolean;
198
  /** Filter placeholder */
199
  filterPlaceholder?: string;
200
  /** Show clear button */
201
  showClear?: boolean;
202
  /** Placeholder text */
203
  placeholder?: string;
204
  /** Disabled state */
205
  disabled?: boolean;
206
  /** CSS class name */
207
  className?: string;
208
  /** Passthrough options */
209
  pt?: PassThroughOptions;
210
}
211

212
interface DropdownChangeEvent<T = any> {
213
  originalEvent: React.SyntheticEvent;
214
  value: T;
215
  target: {
216
    name: string;
217
    id: string;
218
    value: T;
219
  };
220
}
221
```
222

223
### MultiSelect
224

225
Multiple selection component for choosing multiple values from a list of options.
226

227
```typescript { .api }
228
/**
229
 * Multiple selection component
230
 * @param props - MultiSelect configuration options
231
 * @returns JSX element
232
 */
233
function MultiSelect<T = any>(props: MultiSelectProps<T>): JSX.Element;
234

235
interface MultiSelectProps<T = any> {
236
  /** Selected values array */
237
  value?: T[];
238
  /** Available options */
239
  options?: T[];
240
  /** Property name for option value */
241
  optionValue?: string;
242
  /** Property name for option label */
243
  optionLabel?: string;
244
  /** Change event handler */
245
  onChange?: (e: MultiSelectChangeEvent<T>) => void;
246
  /** Filter enabled */
247
  filter?: boolean;
248
  /** Select all checkbox */
249
  selectAll?: boolean;
250
  /** Maximum selection limit */
251
  maxSelectedLabels?: number;
252
  /** Placeholder text */
253
  placeholder?: string;
254
  /** Disabled state */
255
  disabled?: boolean;
256
  /** CSS class name */
257
  className?: string;
258
  /** Passthrough options */
259
  pt?: PassThroughOptions;
260
}
261

262
interface MultiSelectChangeEvent<T = any> {
263
  originalEvent: React.SyntheticEvent;
264
  value: T[];
265
}
266
```
267

268
### Checkbox
269

270
Checkbox input component for boolean value selection with intermediate state support.
271

272
```typescript { .api }
273
/**
274
 * Checkbox input component
275
 * @param props - Checkbox configuration options
276
 * @returns JSX element
277
 */
278
function Checkbox(props: CheckboxProps): JSX.Element;
279

280
interface CheckboxProps {
281
  /** Checked state */
282
  checked?: boolean;
283
  /** Change event handler */
284
  onChange?: (e: CheckboxChangeEvent) => void;
285
  /** Disabled state */
286
  disabled?: boolean;
287
  /** Intermediate/indeterminate state */
288
  indeterminate?: boolean;
289
  /** CSS class name */
290
  className?: string;
291
  /** Passthrough options */
292
  pt?: PassThroughOptions;
293
}
294

295
interface CheckboxChangeEvent {
296
  originalEvent: React.SyntheticEvent;
297
  checked: boolean;
298
}
299
```
300

301
### RadioButton
302

303
Radio button component for single selection within a group of options.
304

305
```typescript { .api }
306
/**
307
 * Radio button component
308
 * @param props - RadioButton configuration options
309
 * @returns JSX element
310
 */
311
function RadioButton(props: RadioButtonProps): JSX.Element;
312

313
interface RadioButtonProps {
314
  /** Input identifier */
315
  inputId?: string;
316
  /** Field name for grouping */
317
  name?: string;
318
  /** Option value */
319
  value?: any;
320
  /** Currently selected value */
321
  checked?: boolean;
322
  /** Change event handler */
323
  onChange?: (e: RadioButtonChangeEvent) => void;
324
  /** Disabled state */
325
  disabled?: boolean;
326
  /** CSS class name */
327
  className?: string;
328
  /** Passthrough options */
329
  pt?: PassThroughOptions;
330
}
331

332
interface RadioButtonChangeEvent {
333
  originalEvent: React.SyntheticEvent;
334
  value: any;
335
  checked: boolean;
336
}
337
```
338

339
### InputNumber
340

341
Numeric input component with formatting, validation, and increment/decrement controls.
342

343
```typescript { .api }
344
/**
345
 * Numeric input component
346
 * @param props - InputNumber configuration options
347
 * @returns JSX element
348
 */
349
function InputNumber(props: InputNumberProps): JSX.Element;
350

351
interface InputNumberProps {
352
  /** Numeric value */
353
  value?: number;
354
  /** Change event handler */
355
  onChange?: (e: InputNumberChangeEvent) => void;
356
  /** Number format mode */
357
  mode?: 'decimal' | 'currency';
358
  /** Currency code for currency mode */
359
  currency?: string;
360
  /** Locale for formatting */
361
  locale?: string;
362
  /** Minimum value */
363
  min?: number;
364
  /** Maximum value */
365
  max?: number;
366
  /** Step increment */
367
  step?: number;
368
  /** Show increment/decrement buttons */
369
  showButtons?: boolean;
370
  /** Button layout */
371
  buttonLayout?: 'stacked' | 'horizontal' | 'vertical';
372
  /** Placeholder text */
373
  placeholder?: string;
374
  /** Disabled state */
375
  disabled?: boolean;
376
  /** CSS class name */
377
  className?: string;
378
  /** Passthrough options */
379
  pt?: PassThroughOptions;
380
}
381

382
interface InputNumberChangeEvent {
383
  originalEvent: React.SyntheticEvent;
384
  value: number;
385
}
386
```
387

388
### Password
389

390
Password input component with strength validation and toggle visibility functionality.
391

392
```typescript { .api }
393
/**
394
 * Password input component
395
 * @param props - Password configuration options
396
 * @returns JSX element
397
 */
398
function Password(props: PasswordProps): JSX.Element;
399

400
interface PasswordProps {
401
  /** Password value */
402
  value?: string;
403
  /** Change event handler */
404
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
405
  /** Show/hide toggle button */
406
  toggleMask?: boolean;
407
  /** Strength feedback enabled */
408
  feedback?: boolean;
409
  /** Custom strength prompt text */
410
  promptLabel?: string;
411
  /** Custom weak strength text */
412
  weakLabel?: string;
413
  /** Custom medium strength text */
414
  mediumLabel?: string;
415
  /** Custom strong strength text */
416
  strongLabel?: string;
417
  /** Placeholder text */
418
  placeholder?: string;
419
  /** Disabled state */
420
  disabled?: boolean;
421
  /** CSS class name */
422
  className?: string;
423
  /** Passthrough options */
424
  pt?: PassThroughOptions;
425
}
426
```
427

428
### AutoComplete
429

430
Autocomplete input component with search suggestions and custom filtering.
431

432
```typescript { .api }
433
/**
434
 * Autocomplete input component
435
 * @param props - AutoComplete configuration options
436
 * @returns JSX element
437
 */
438
function AutoComplete<T = any>(props: AutoCompleteProps<T>): JSX.Element;
439

440
interface AutoCompleteProps<T = any> {
441
  /** Selected value */
442
  value?: T;
443
  /** Available suggestions */
444
  suggestions?: T[];
445
  /** Search event handler */
446
  completeMethod?: (e: AutoCompleteCompleteEvent) => void;
447
  /** Change event handler */
448
  onChange?: (e: AutoCompleteChangeEvent<T>) => void;
449
  /** Property name for option display */
450
  field?: string;
451
  /** Minimum characters to trigger search */
452
  minLength?: number;
453
  /** Search delay in milliseconds */
454
  delay?: number;
455
  /** Multiple selection mode */
456
  multiple?: boolean;
457
  /** Dropdown trigger button */
458
  dropdown?: boolean;
459
  /** Placeholder text */
460
  placeholder?: string;
461
  /** Disabled state */
462
  disabled?: boolean;
463
  /** CSS class name */
464
  className?: string;
465
  /** Passthrough options */
466
  pt?: PassThroughOptions;
467
}
468

469
interface AutoCompleteCompleteEvent {
470
  originalEvent: React.SyntheticEvent;
471
  query: string;
472
}
473

474
interface AutoCompleteChangeEvent<T = any> {
475
  originalEvent: React.SyntheticEvent;
476
  value: T;
477
}
478
```
479

480
### InputSwitch
481

482
Toggle switch component for boolean value selection with smooth animations.
483

484
```typescript { .api }
485
/**
486
 * Toggle switch component
487
 * @param props - InputSwitch configuration options
488
 * @returns JSX element
489
 */
490
function InputSwitch(props: InputSwitchProps): JSX.Element;
491

492
interface InputSwitchProps {
493
  /** Checked state */
494
  checked?: boolean;
495
  /** Change event handler */
496
  onChange?: (e: InputSwitchChangeEvent) => void;
497
  /** Value when checked */
498
  trueValue?: any;
499
  /** Value when unchecked */
500
  falseValue?: any;
501
  /** Disabled state */
502
  disabled?: boolean;
503
  /** CSS class name */
504
  className?: string;
505
  /** Passthrough options */
506
  pt?: PassThroughOptions;
507
}
508

509
interface InputSwitchChangeEvent {
510
  originalEvent: React.SyntheticEvent;
511
  value: boolean;
512
}
513
```
514

515
### ColorPicker
516

517
Color selection component with various format support and overlay display.
518

519
```typescript { .api }
520
/**
521
 * ColorPicker component for color selection
522
 * @param props - ColorPicker configuration options
523
 * @returns JSX element
524
 */
525
function ColorPicker(props: ColorPickerProps): JSX.Element;
526

527
interface ColorPickerProps {
528
  /** Current color value */
529
  value?: string | ColorPickerRGBType | ColorPickerHSBType;
530
  /** Change event handler */
531
  onChange?: (e: ColorPickerChangeEvent) => void;
532
  /** Default color when value is null */
533
  defaultColor?: string;
534
  /** Format to use in value binding */
535
  format?: 'hex' | 'rgb' | 'hsb';
536
  /** Whether to display as overlay or inline */
537
  inline?: boolean;
538
  /** Disabled state */
539
  disabled?: boolean;
540
  /** Tab index */
541
  tabIndex?: number;
542
  /** Component ID */
543
  inputId?: string;
544
  /** Auto focus on load */
545
  autoFocus?: boolean;
546
  /** CSS class name */
547
  className?: string;
548
  /** Inline styles */
549
  style?: React.CSSProperties;
550
  /** Input field CSS class */
551
  inputClassName?: string;
552
  /** Input field inline styles */
553
  inputStyle?: React.CSSProperties;
554
  /** Overlay panel CSS class */
555
  panelClassName?: string;
556
  /** Overlay panel inline styles */
557
  panelStyle?: React.CSSProperties;
558
  /** Element to attach overlay */
559
  appendTo?: 'self' | HTMLElement | (() => HTMLElement);
560
  /** Tooltip options */
561
  tooltip?: string;
562
  /** Tooltip configuration */
563
  tooltipOptions?: TooltipOptions;
564
  /** Passthrough options for DOM customization */
565
  pt?: ColorPickerPassThroughOptions;
566
}
567

568
interface ColorPickerRGBType {
569
  r: number;
570
  g: number;
571
  b: number;
572
}
573

574
interface ColorPickerHSBType {
575
  h: number;
576
  s: number;
577
  b: number;
578
}
579

580
interface ColorPickerChangeEvent {
581
  originalEvent: React.SyntheticEvent;
582
  value: string | ColorPickerRGBType | ColorPickerHSBType;
583
  target: {
584
    name: string;
585
    id: string;
586
    value: string | ColorPickerRGBType | ColorPickerHSBType;
587
  };
588
}
589
```
590

591
### FileUpload
592

593
File upload component with drag and drop support and progress tracking.
594

595
```typescript { .api }
596
/**
597
 * FileUpload component for file uploads
598
 * @param props - FileUpload configuration options
599
 * @returns JSX element
600
 */
601
function FileUpload(props: FileUploadProps): JSX.Element;
602

603
interface FileUploadProps {
604
  /** Name of the request parameter */
605
  name?: string;
606
  /** Remote URL to upload files */
607
  url?: string;
608
  /** File selection mode */
609
  mode?: 'basic' | 'advanced';
610
  /** Allow multiple file selection */
611
  multiple?: boolean;
612
  /** Accepted file types */
613
  accept?: string;
614
  /** Disable the upload functionality */
615
  disabled?: boolean;
616
  /** Enable automatic upload on selection */
617
  auto?: boolean;
618
  /** Maximum file size in bytes */
619
  maxFileSize?: number;
620
  /** Custom invalid file size message */
621
  invalidFileSizeMessage?: string;
622
  /** Custom invalid file type message */
623
  invalidFileTypeMessage?: string;
624
  /** Files to display initially */
625
  files?: File[];
626
  /** Custom upload handler */
627
  customUpload?: boolean;
628
  /** Progress callback */
629
  onProgress?: (e: FileUploadProgressEvent) => void;
630
  /** Upload callback */
631
  onUpload?: (e: FileUploadUploadEvent) => void;
632
  /** Error callback */
633
  onError?: (e: FileUploadErrorEvent) => void;
634
  /** Clear callback */
635
  onClear?: () => void;
636
  /** Remove callback */
637
  onRemove?: (e: FileUploadRemoveEvent) => void;
638
  /** Select callback */
639
  onSelect?: (e: FileUploadSelectEvent) => void;
640
  /** Custom upload method for customUpload mode */
641
  uploadHandler?: (e: FileUploadHandlerEvent) => void;
642
  /** CSS class name */
643
  className?: string;
644
  /** Inline styles */
645
  style?: React.CSSProperties;
646
  /** Passthrough options for DOM customization */
647
  pt?: FileUploadPassThroughOptions;
648
}
649
```
650

651
### InputMask
652

653
Input field with formatting mask for structured data entry.
654

655
```typescript { .api }
656
/**
657
 * InputMask component for formatted text input
658
 * @param props - InputMask configuration options
659
 * @returns JSX element
660
 */
661
function InputMask(props: InputMaskProps): JSX.Element;
662

663
interface InputMaskProps {
664
  /** Input value */
665
  value?: string;
666
  /** Mask format pattern */
667
  mask?: string;
668
  /** Placeholder character for unfilled parts */
669
  slotChar?: string;
670
  /** Auto clear incomplete input */
671
  autoClear?: boolean;
672
  /** Unmask value on model binding */
673
  unmask?: boolean;
674
  /** Change event handler */
675
  onChange?: (e: InputMaskChangeEvent) => void;
676
  /** Complete event handler */
677
  onComplete?: (e: InputMaskCompleteEvent) => void;
678
  /** Focus event handler */
679
  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
680
  /** Blur event handler */
681
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
682
  /** CSS class name */
683
  className?: string;
684
  /** Inline styles */
685
  style?: React.CSSProperties;
686
  /** Placeholder text */
687
  placeholder?: string;
688
  /** Disabled state */
689
  disabled?: boolean;
690
  /** Read-only state */
691
  readOnly?: boolean;
692
  /** Component size */
693
  size?: number;
694
  /** Passthrough options for DOM customization */
695
  pt?: InputMaskPassThroughOptions;
696
}
697
```
698

699
### InputTextarea
700

701
Multi-line text input component with auto-resize capability.
702

703
```typescript { .api }
704
/**
705
 * InputTextarea component for multi-line text input
706
 * @param props - InputTextarea configuration options
707
 * @returns JSX element
708
 */
709
function InputTextarea(props: InputTextareaProps): JSX.Element;
710

711
interface InputTextareaProps {
712
  /** Textarea value */
713
  value?: string;
714
  /** Auto resize based on content */
715
  autoResize?: boolean;
716
  /** Number of rows */
717
  rows?: number;
718
  /** Number of columns */
719
  cols?: number;
720
  /** Change event handler */
721
  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
722
  /** Key down event handler */
723
  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
724
  /** Focus event handler */
725
  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
726
  /** Blur event handler */
727
  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
728
  /** CSS class name */
729
  className?: string;
730
  /** Inline styles */
731
  style?: React.CSSProperties;
732
  /** Placeholder text */
733
  placeholder?: string;
734
  /** Disabled state */
735
  disabled?: boolean;
736
  /** Read-only state */
737
  readOnly?: boolean;
738
  /** Maximum length */
739
  maxLength?: number;
740
  /** Tooltip options */
741
  tooltip?: string;
742
  /** Tooltip configuration */
743
  tooltipOptions?: TooltipOptions;
744
  /** Passthrough options for DOM customization */
745
  pt?: InputTextareaPassThroughOptions;
746
}
747
```
748

749
### Rating
750

751
Star rating component for collecting user feedback and ratings.
752

753
```typescript { .api }
754
/**
755
 * Rating component for star-based ratings
756
 * @param props - Rating configuration options
757
 * @returns JSX element
758
 */
759
function Rating(props: RatingProps): JSX.Element;
760

761
interface RatingProps {
762
  /** Current rating value */
763
  value?: number;
764
  /** Number of stars */
765
  stars?: number;
766
  /** Disabled state */
767
  disabled?: boolean;
768
  /** Read-only state */
769
  readOnly?: boolean;
770
  /** Allow cancellation by clicking selected star */
771
  cancel?: boolean;
772
  /** Change event handler */
773
  onChange?: (e: RatingChangeEvent) => void;
774
  /** CSS class name */
775
  className?: string;
776
  /** Inline styles */
777
  style?: React.CSSProperties;
778
  /** Tooltip options */
779
  tooltip?: string;
780
  /** Tooltip configuration */
781
  tooltipOptions?: TooltipOptions;
782
  /** Passthrough options for DOM customization */
783
  pt?: RatingPassThroughOptions;
784
}
785

786
interface RatingChangeEvent {
787
  originalEvent: React.SyntheticEvent;
788
  value: number;
789
}
790
```
791

792
### Slider
793

794
Slider component for selecting numeric values within a range.
795

796
```typescript { .api }
797
/**
798
 * Slider component for range selection
799
 * @param props - Slider configuration options
800
 * @returns JSX element
801
 */
802
function Slider(props: SliderProps): JSX.Element;
803

804
interface SliderProps {
805
  /** Current value */
806
  value?: number | number[];
807
  /** Minimum value */
808
  min?: number;
809
  /** Maximum value */
810
  max?: number;
811
  /** Step factor */
812
  step?: number;
813
  /** Orientation of slider */
814
  orientation?: 'horizontal' | 'vertical';
815
  /** Enable range selection */
816
  range?: boolean;
817
  /** Disabled state */
818
  disabled?: boolean;
819
  /** Change event handler */
820
  onChange?: (e: SliderChangeEvent) => void;
821
  /** Slide end event handler */
822
  onSlideEnd?: (e: SliderSlideEndEvent) => void;
823
  /** CSS class name */
824
  className?: string;
825
  /** Inline styles */
826
  style?: React.CSSProperties;
827
  /** Passthrough options for DOM customization */
828
  pt?: SliderPassThroughOptions;
829
}
830

831
interface SliderChangeEvent {
832
  originalEvent: React.SyntheticEvent;
833
  value: number | number[];
834
}
835
```
836

837
### ToggleButton
838

839
Toggle button component for binary choices with custom labels.
840

841
```typescript { .api }
842
/**
843
 * ToggleButton component for binary selection
844
 * @param props - ToggleButton configuration options
845
 * @returns JSX element
846
 */
847
function ToggleButton(props: ToggleButtonProps): JSX.Element;
848

849
interface ToggleButtonProps {
850
  /** Checked state */
851
  checked?: boolean;
852
  /** Label when checked */
853
  onLabel?: string;
854
  /** Label when unchecked */
855
  offLabel?: string;
856
  /** Icon when checked */
857
  onIcon?: string;
858
  /** Icon when unchecked */
859
  offIcon?: string;
860
  /** Icon position */
861
  iconPos?: 'left' | 'right';
862
  /** Disabled state */
863
  disabled?: boolean;
864
  /** Change event handler */
865
  onChange?: (e: ToggleButtonChangeEvent) => void;
866
  /** CSS class name */
867
  className?: string;
868
  /** Inline styles */
869
  style?: React.CSSProperties;
870
  /** Tab index */
871
  tabIndex?: number;
872
  /** Tooltip options */
873
  tooltip?: string;
874
  /** Tooltip configuration */
875
  tooltipOptions?: TooltipOptions;
876
  /** Passthrough options for DOM customization */
877
  pt?: ToggleButtonPassThroughOptions;
878
}
879

880
interface ToggleButtonChangeEvent {
881
  originalEvent: React.MouseEvent<HTMLElement>;
882
  value: boolean;
883
}
884
```