0
# Form Components
1

2
Comprehensive form controls with validation, labeling, and accessibility features for building data entry interfaces. These components provide consistent styling, behavior, and accessibility patterns across all form interactions.
3

4
## Capabilities
5

6
### TextField
7

8
Text input field with labels, validation, formatting, and various input types for collecting user text data.
9

10
```typescript { .api }
11
/**
12
 * Text input field with validation and formatting
13
 * @param label - Field label text
14
 * @param value - Current input value
15
 * @param onChange - Value change handler
16
 * @param type - Input type specification
17
 * @param error - Validation error message
18
 * @param helpText - Helpful description text
19
 * @returns JSX element with text input field
20
 */
21
function TextField(props: TextFieldProps): JSX.Element;
22

23
type TextFieldProps = NonMutuallyExclusiveProps & MutuallyExclusiveInteractionProps & MutuallyExclusiveSelectionProps;
24

25
interface NonMutuallyExclusiveProps {
26
  /** Text to display before value */
27
  prefix?: React.ReactNode;
28
  /** Text to display after value */
29
  suffix?: React.ReactNode;
30
  /** Content to vertically display above the input value */
31
  verticalContent?: React.ReactNode;
32
  /** Hint text to display */
33
  placeholder?: string;
34
  /** Initial value for the input */
35
  value?: string;
36
  /** Additional hint text to display */
37
  helpText?: React.ReactNode;
38
  /** Label for the input */
39
  label: React.ReactNode;
40
  /** Adds an action to the label */
41
  labelAction?: LabelledProps['action'];
42
  /** Visually hide the label */
43
  labelHidden?: boolean;
44
  /** Disable the input */
45
  disabled?: boolean;
46
  /** Show a clear text button in the input */
47
  clearButton?: boolean;
48
  /** Indicates whether or not the entire value should be selected on focus */
49
  selectTextOnFocus?: boolean;
50
  /** An inline autocomplete suggestion containing the input value */
51
  suggestion?: string;
52
  /** Disable editing of the input */
53
  readOnly?: boolean;
54
  /** Automatically focus the input */
55
  autoFocus?: boolean;
56
  /** Force the focus state on the input */
57
  focused?: boolean;
58
  /** Allow for multiple lines of input */
59
  multiline?: boolean | number;
60
  /** Error to display beneath the label */
61
  error?: Error | boolean;
62
  /** An element connected to the right of the input */
63
  connectedRight?: React.ReactNode;
64
  /** An element connected to the left of the input */
65
  connectedLeft?: React.ReactNode;
66
  /** Determine type of input */
67
  type?: 'text' | 'email' | 'number' | 'integer' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' | 'currency';
68
  /** Name of the input */
69
  name?: string;
70
  /** ID for the input */
71
  id?: string;
72
  /** Defines a specific role attribute for the input */
73
  role?: string;
74
  /** Limit increment value for numeric and date-time inputs */
75
  step?: number;
76
  /** Increment value for numeric and date-time inputs when using Page Up or Page Down */
77
  largeStep?: number;
78
  /** Enable automatic completion by the browser. Set to "off" when you do not want the browser to fill in info (REQUIRED) */
79
  autoComplete: string;
80
  /** Mimics the behavior of the native HTML attribute, limiting the maximum value */
81
  max?: number | string;
82
  /** Maximum character length for an input */
83
  maxLength?: number;
84
  /** Maximum height of the input element. Only applies when `multiline` is `true` */
85
  maxHeight?: number | string;
86
  /** Mimics the behavior of the native HTML attribute, limiting the minimum value */
87
  min?: number | string;
88
  /** Minimum character length for an input */
89
  minLength?: number;
90
  /** A regular expression to check the value against */
91
  pattern?: string;
92
  /** Choose the keyboard that should be used on mobile devices */
93
  inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
94
  /** Indicate whether value should have spelling checked */
95
  spellCheck?: boolean;
96
  /** Indicates the id of a component owned by the input */
97
  ariaOwns?: string;
98
  /** Indicates whether or not a Popover is displayed */
99
  ariaExpanded?: boolean;
100
  /** Indicates the id of a component controlled by the input */
101
  ariaControls?: string;
102
  /** Indicates the id of a related component's visually focused element to the input */
103
  ariaActiveDescendant?: string;
104
  /** Indicates what kind of user input completion suggestions are provided */
105
  ariaAutocomplete?: string;
106
  /** Indicates whether or not the character count should be displayed */
107
  showCharacterCount?: boolean;
108
  /** Determines the alignment of the text in the input */
109
  align?: 'left' | 'center' | 'right';
110
  /** Visual required indicator, adds an asterisk to label */
111
  requiredIndicator?: boolean;
112
  /** Indicates whether or not a monospaced font should be used */
113
  monospaced?: boolean;
114
  /** Visual styling options for the TextField */
115
  variant?: 'inherit' | 'borderless';
116
  /** Changes the size of the input, giving it more or less padding */
117
  size?: 'slim' | 'medium';
118
  /** Callback fired when clear button is clicked */
119
  onClearButtonClick?(id: string): void;
120
  /** Callback fired when value is changed */
121
  onChange?(value: string, id: string): void;
122
  /** When provided, callback fired instead of onChange when value is changed via the number step control */
123
  onSpinnerChange?(value: string, id: string): void;
124
  /** Callback fired when input is focused */
125
  onFocus?: (event?: React.FocusEvent) => void;
126
  /** Callback fired when input is blurred */
127
  onBlur?(event?: React.FocusEvent): void;
128
  /** Indicates the tone of the text field */
129
  tone?: 'magic';
130
  /** Whether the TextField will grow as the text within the input changes */
131
  autoSize?: boolean;
132
  /** Indicates the loading state */
133
  loading?: boolean;
134
}
135

136
type MutuallyExclusiveSelectionProps = SelectSuggestion | SelectTextOnFocus;
137
type MutuallyExclusiveInteractionProps = Interactive | Readonly | Disabled;
138

139
interface SelectSuggestion {
140
  suggestion?: string;
141
}
142

143
interface SelectTextOnFocus {
144
  selectTextOnFocus?: true;
145
}
146

147
interface Readonly {
148
  readonly?: true;
149
}
150

151
interface Disabled {
152
  disabled?: true;
153
}
154

155
interface Interactive {
156
  onChange(value: string, id: string): void;
157
}
158

159
interface LabelAction {
160
  /** Action content */
161
  content: string;
162
  /** Action callback */
163
  onAction: () => void;
164
}
165
```
166

167
**Usage Example:**
168

169
```typescript
170
import React, { useState } from 'react';
171
import { TextField, FormLayout, Button } from '@shopify/polaris';
172

173
function ContactForm() {
174
  const [name, setName] = useState('');
175
  const [email, setEmail] = useState('');
176
  const [message, setMessage] = useState('');
177
  const [errors, setErrors] = useState<{[key: string]: string}>({});
178

179
  const validateEmail = (email: string) => {
180
    return /\S+@\S+\.\S+/.test(email);
181
  };
182

183
  const handleSubmit = () => {
184
    const newErrors: {[key: string]: string} = {};
185
    
186
    if (!name.trim()) newErrors.name = 'Name is required';
187
    if (!email.trim()) newErrors.email = 'Email is required';
188
    else if (!validateEmail(email)) newErrors.email = 'Enter a valid email';
189
    
190
    setErrors(newErrors);
191
  };
192

193
  return (
194
    <FormLayout>
195
      <TextField
196
        label="Full name"
197
        value={name}
198
        onChange={(value) => setName(value)}
199
        error={errors.name}
200
        autoComplete="name"
201
        requiredIndicator
202
      />
203
      <TextField
204
        label="Email address"
205
        type="email"
206
        value={email}
207
        onChange={(value) => setEmail(value)}
208
        error={errors.email}
209
        autoComplete="email"
210
        requiredIndicator
211
      />
212
      <TextField
213
        label="Message"
214
        value={message}
215
        onChange={(value) => setMessage(value)}
216
        multiline={4}
217
        autoComplete="off"
218
        helpText="Tell us how we can help you"
219
      />
220
      <Button primary onClick={handleSubmit}>
221
        Send message
222
      </Button>
223
    </FormLayout>
224
  );
225
}
226
```
227

228
### Checkbox
229

230
Checkbox input component with support for checked, unchecked, and indeterminate states.
231

232
```typescript { .api }
233
/**
234
 * Checkbox input for boolean selection
235
 * @param label - Checkbox label content
236
 * @param checked - Current checked state
237
 * @param onChange - Change handler for checked state
238
 * @param disabled - Disabled state
239
 * @returns JSX element with checkbox input
240
 */
241
function Checkbox(props: CheckboxProps): JSX.Element;
242

243
interface CheckboxProps {
244
  /** Checkbox label content */
245
  label: React.ReactNode;
246
  /** Current checked state */
247
  checked: boolean | 'indeterminate';
248
  /** Callback when checked state changes */
249
  onChange: (newChecked: boolean, id: string) => void;
250
  /** Disabled state */
251
  disabled?: boolean;
252
  /** Validation error */
253
  error?: Error;
254
  /** Help text */
255
  helpText?: React.ReactNode;
256
  /** Checkbox ID */
257
  id?: string;
258
  /** Checkbox name attribute */
259
  name?: string;
260
  /** Checkbox value attribute */
261
  value?: string;
262
  /** Fill available space */
263
  fill?: boolean;
264
  /** Label hidden visually */
265
  labelHidden?: boolean;
266
  /** Blur event handler */
267
  onBlur?: () => void;
268
  /** Focus event handler */
269
  onFocus?: () => void;
270
}
271

272
interface CheckboxHandles {
273
  /** Focus the checkbox */
274
  focus(): void;
275
}
276
```
277

278
### RadioButton
279

280
Radio button input component for single selection from a group of options.
281

282
```typescript { .api }
283
/**
284
 * Radio button input for single selection
285
 * @param label - Radio button label
286
 * @param checked - Current selection state
287
 * @param onChange - Selection change handler
288
 * @returns JSX element with radio button
289
 */
290
function RadioButton(props: RadioButtonProps): JSX.Element;
291

292
interface RadioButtonProps {
293
  /** Radio button label */
294
  label: React.ReactNode;
295
  /** Current checked state */
296
  checked: boolean;
297
  /** Callback when selection changes */
298
  onChange: (newChecked: boolean, id: string) => void;
299
  /** Radio button ID */
300
  id?: string;
301
  /** Radio button name (for grouping) */
302
  name?: string;
303
  /** Radio button value */
304
  value?: string;
305
  /** Disabled state */
306
  disabled?: boolean;
307
  /** Help text */
308
  helpText?: React.ReactNode;
309
  /** Fill available space */
310
  fill?: boolean;
311
  /** Label hidden visually */
312
  labelHidden?: boolean;
313
  /** Blur event handler */
314
  onBlur?: () => void;
315
  /** Focus event handler */
316
  onFocus?: () => void;
317
}
318
```
319

320
### Select
321

322
Dropdown select component with options, groups, and selection handling for choosing from predefined lists.
323

324
```typescript { .api }
325
/**
326
 * Dropdown select for choosing from options
327
 * @param options - Available options or option groups
328
 * @param value - Currently selected value
329
 * @param onChange - Selection change handler
330
 * @returns JSX element with select dropdown
331
 */
332
function Select(props: SelectProps): JSX.Element;
333

334
interface SelectProps {
335
  /** Available select options */
336
  options: (SelectOption | SelectGroup)[];
337
  /** Currently selected value */
338
  value: string;
339
  /** Callback when selection changes */
340
  onChange: (value: string, id: string) => void;
341
  /** Select field label */
342
  label: string;
343
  /** Disabled state */
344
  disabled?: boolean;
345
  /** Help text */
346
  helpText?: React.ReactNode;
347
  /** Placeholder text */
348
  placeholder?: string;
349
  /** Validation error */
350
  error?: Error;
351
  /** Required field */
352
  required?: boolean;
353
  /** Label action */
354
  labelAction?: LabelAction;
355
  /** Label hidden visually */
356
  labelHidden?: boolean;
357
  /** Select ID */
358
  id?: string;
359
  /** Select name attribute */
360
  name?: string;
361
  /** Blur event handler */
362
  onBlur?: () => void;
363
  /** Focus event handler */
364
  onFocus?: () => void;
365
}
366

367
interface SelectOption {
368
  /** Option label */
369
  label: string;
370
  /** Option value */
371
  value: string;
372
  /** Disabled option */
373
  disabled?: boolean;
374
  /** Option prefix content */
375
  prefix?: React.ReactNode;
376
}
377

378
interface SelectGroup {
379
  /** Group title */
380
  title: string;
381
  /** Options in the group */
382
  options: SelectOption[];
383
}
384
```
385

386
### ChoiceList
387

388
Multiple choice selection component supporting radio buttons or checkboxes for selecting from a list.
389

390
```typescript { .api }
391
/**
392
 * Multiple choice selection component
393
 * @param title - Choice list title
394
 * @param choices - Available choices
395
 * @param selected - Currently selected choices
396
 * @param onChange - Selection change handler
397
 * @returns JSX element with choice list
398
 */
399
function ChoiceList(props: ChoiceListProps): JSX.Element;
400

401
interface ChoiceListProps {
402
  /** Choice list title */
403
  title?: string;
404
  /** Available choices */
405
  choices: Choice[];
406
  /** Currently selected choice values */
407
  selected: string[];
408
  /** Callback when selection changes */
409
  onChange: (selected: string[]) => void;
410
  /** Allow multiple selections */
411
  allowMultiple?: boolean;
412
  /** Disabled state */
413
  disabled?: boolean;
414
  /** Validation error */
415
  error?: Error;
416
  /** Title hidden visually */
417
  titleHidden?: boolean;
418
  /** Name attribute for form submission */
419
  name?: string;
420
}
421

422
interface Choice {
423
  /** Choice label */
424
  label: React.ReactNode;
425
  /** Choice value */
426
  value: string;
427
  /** Disabled choice */
428
  disabled?: boolean;
429
  /** Help text for this choice */
430
  helpText?: React.ReactNode;
431
  /** Additional content below the choice */
432
  renderChildren?: (isSelected: boolean) => React.ReactNode;
433
}
434
```
435

436
### Form
437

438
Form wrapper component with validation and submission handling for organizing form elements.
439

440
```typescript { .api }
441
/**
442
 * Form wrapper with validation and submission
443
 * @param children - Form content
444
 * @param onSubmit - Form submission handler
445
 * @returns JSX element with form wrapper
446
 */
447
function Form(props: FormProps): JSX.Element;
448

449
interface FormProps {
450
  /** Form content */
451
  children: React.ReactNode;
452
  /** Form submission handler */
453
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
454
  /** Implicit form submission */
455
  implicitSubmit?: boolean;
456
  /** Prevent default form submission */
457
  preventDefault?: boolean;
458
  /** Disable native form validation */
459
  noValidate?: boolean;
460
  /** Accepted character set */
461
  acceptCharset?: string;
462
  /** Form action URL */
463
  action?: string;
464
  /** Form submission method */
465
  method?: 'get' | 'post';
466
  /** Form name attribute */
467
  name?: string;
468
  /** Form target */
469
  target?: string;
470
}
471
```
472

473
### FormLayout
474

475
Layout component for organizing form fields with consistent spacing and grouping.
476

477
```typescript { .api }
478
/**
479
 * Layout component for organizing form fields
480
 * @param children - Form fields and content
481
 * @returns JSX element with form layout
482
 */
483
function FormLayout(props: FormLayoutProps): JSX.Element;
484

485
interface FormLayoutProps {
486
  /** Form fields and content */
487
  children?: React.ReactNode;
488
}
489

490
/**
491
 * Form layout group for related fields
492
 * @param children - Grouped form fields
493
 * @param title - Group title
494
 * @param condensed - Condensed spacing
495
 * @returns JSX element with form group
496
 */
497
function FormLayoutGroup(props: FormLayoutGroupProps): JSX.Element;
498

499
interface FormLayoutGroupProps {
500
  /** Grouped form fields */
501
  children?: React.ReactNode;
502
  /** Group title */
503
  title?: string;
504
  /** Condensed spacing */
505
  condensed?: boolean;
506
  /** Help text for the group */
507
  helpText?: React.ReactNode;
508
}
509
```
510

511
### RangeSlider
512

513
Dual-handle range input component for selecting value ranges with formatting options.
514

515
```typescript { .api }
516
/**
517
 * Dual-handle range input for value ranges
518
 * @param label - Range slider label
519
 * @param value - Current range values
520
 * @param onChange - Range change handler
521
 * @param min - Minimum value
522
 * @param max - Maximum value
523
 * @returns JSX element with range slider
524
 */
525
function RangeSlider(props: RangeSliderProps): JSX.Element;
526

527
interface RangeSliderProps {
528
  /** Range slider label */
529
  label: string;
530
  /** Current range values [min, max] */
531
  value: [number, number];
532
  /** Callback when range changes */
533
  onChange: (value: [number, number], id: string) => void;
534
  /** Minimum allowed value */
535
  min?: number;
536
  /** Maximum allowed value */
537
  max?: number;
538
  /** Step increment */
539
  step?: number;
540
  /** Disabled state */
541
  disabled?: boolean;
542
  /** Output configuration */
543
  output?: boolean;
544
  /** Prefix for displayed values */
545
  prefix?: React.ReactNode;
546
  /** Suffix for displayed values */
547
  suffix?: React.ReactNode;
548
  /** Help text */
549
  helpText?: React.ReactNode;
550
  /** Validation error */
551
  error?: Error;
552
  /** Label action */
553
  labelAction?: LabelAction;
554
  /** Label hidden visually */
555
  labelHidden?: boolean;
556
  /** Range slider ID */
557
  id?: string;
558
  /** Dual thumb mode */
559
  dualThumb?: boolean;
560
  /** Blur event handler */
561
  onBlur?: () => void;
562
  /** Focus event handler */
563
  onFocus?: () => void;
564
}
565
```
566

567
## Shared Form Types
568

569
```typescript { .api }
570
/** Union type for validation error content */
571
type Error = string | React.ReactNode | (string | React.ReactNode)[];
572

573
interface LabelAction {
574
  /** Action content/label */
575
  content: string;
576
  /** Action callback */
577
  onAction: () => void;
578
}
579

580
interface FormFieldProps {
581
  /** Field label */
582
  label?: string;
583
  /** Field ID */
584
  id?: string;
585
  /** Field name */
586
  name?: string;
587
  /** Disabled state */
588
  disabled?: boolean;
589
  /** Required field */
590
  required?: boolean;
591
  /** Validation error */
592
  error?: Error;
593
  /** Help text */
594
  helpText?: React.ReactNode;
595
  /** Label action */
596
  labelAction?: LabelAction;
597
  /** Label hidden visually */
598
  labelHidden?: boolean;
599
}
600
```
601

602
### Autocomplete
603

604
Searchable dropdown with configurable options and multiple selection support for filtering and selecting from large datasets.
605

606
```typescript { .api }
607
/**
608
 * Searchable dropdown with options filtering
609
 * @param options - Collection of available options
610
 * @param selected - Currently selected option values
611
 * @param textField - Text field component for input
612
 * @param onSelect - Selection change handler
613
 * @returns JSX element with autocomplete functionality
614
 */
615
function Autocomplete(props: AutocompleteProps): JSX.Element;
616

617
interface AutocompleteProps {
618
  /** Unique identifier for the autocomplete */
619
  id?: string;
620
  /** Collection of options to be listed */
621
  options: SectionDescriptor[] | OptionDescriptor[];
622
  /** The selected options */
623
  selected: string[];
624
  /** The text field component attached to the list of options */
625
  textField: React.ReactElement;
626
  /** The preferred direction to open the popover */
627
  preferredPosition?: PopoverProps['preferredPosition'];
628
  /** Title of the list of options */
629
  listTitle?: string;
630
  /** Allow more than one option to be selected */
631
  allowMultiple?: boolean;
632
  /** An action to render above the list of options */
633
  actionBefore?: ActionListItemDescriptor & {
634
    wrapOverflow?: boolean;
635
  };
636
  /** Display loading state */
637
  loading?: boolean;
638
  /** Indicates if more results will load dynamically */
639
  willLoadMoreResults?: boolean;
640
  /** Is rendered when there are no options */
641
  emptyState?: React.ReactNode;
642
  /** Callback when the selection of options is changed */
643
  onSelect(selected: string[]): void;
644
  /** Callback when the end of the list is reached */
645
  onLoadMoreResults?(): void;
646
}
647
```
648

649
### ColorPicker
650

651
Color selection component with hue, saturation, brightness, and optional alpha channel controls.
652

653
```typescript { .api }
654
/**
655
 * Color selection interface with HSB and alpha controls
656
 * @param color - Current color value
657
 * @param onChange - Color change handler
658
 * @param allowAlpha - Enable alpha channel selection
659
 * @returns JSX element with color picker interface
660
 */
661
function ColorPicker(props: ColorPickerProps): JSX.Element;
662

663
interface ColorPickerProps {
664
  /** ID for the element */
665
  id?: string;
666
  /** The currently selected color */
667
  color: HSBColor & { alpha?: number };
668
  /** Allow user to select an alpha value */
669
  allowAlpha?: boolean;
670
  /** Allow HuePicker to take the full width */
671
  fullWidth?: boolean;
672
  /** Callback when color is selected */
673
  onChange(color: HSBAColor): void;
674
}
675
```
676

677
### Combobox
678

679
Flexible input component that combines text field with dropdown options, supporting custom content and multiple selection modes.
680

681
```typescript { .api }
682
/**
683
 * Combined text input and dropdown with custom content
684
 * @param activator - Text field component to activate popover
685
 * @param children - Content to display in the dropdown
686
 * @param onClose - Close handler for the dropdown
687
 * @returns JSX element with combobox functionality
688
 */
689
function Combobox(props: ComboboxProps): JSX.Element;
690

691
interface ComboboxProps {
692
  /** The text field component to activate the Popover */
693
  activator: React.ReactElement<TextFieldProps>;
694
  /** Allows more than one option to be selected */
695
  allowMultiple?: boolean;
696
  /** The content to display inside the popover */
697
  children?: React.ReactNode;
698
  /** The preferred direction to open the popover */
699
  preferredPosition?: PopoverProps['preferredPosition'];
700
  /** Whether or not more results will load dynamically */
701
  willLoadMoreResults?: boolean;
702
  /** Height to set on the Popover Pane */
703
  height?: string;
704
  /** Callback when the popover is closed */
705
  onClose?(): void;
706
  /** Callback when the end of the list is reached */
707
  onLoadMoreResults?(): void;
708
  /** Callback when the popover is scrolled to the bottom */
709
  onScrolledToBottom?(): void;
710
}
711
```
712

713
### DatePicker
714

715
Calendar interface for date selection with range support, localization, and custom date validation.
716

717
```typescript { .api }
718
/**
719
 * Calendar date picker with range selection
720
 * @param selected - Currently selected date or range
721
 * @param onChange - Date selection handler
722
 * @param month - Displayed month and year
723
 * @param onMonthChange - Month navigation handler
724
 * @returns JSX element with date picker interface
725
 */
726
function DatePicker(props: DatePickerProps): JSX.Element;
727

728
interface DatePickerProps {
729
  /** ID for the element */
730
  id?: string;
731
  /** The selected date or range of dates */
732
  selected?: Date | Range;
733
  /** Allow a range of dates to be selected */
734
  allowRange?: boolean;
735
  /** Disable selecting dates before this. */
736
  disableDatesBefore?: Date;
737
  /** Disable selecting dates after this. */
738
  disableDatesAfter?: Date;
739
  /** The month to show. */
740
  month: number;
741
  /** The year to show. */
742
  year: number;
743
  /** Callback when date selection changes */
744
  onChange?(date: Range): void;
745
  /** Callback when month or year changes */
746
  onMonthChange?(month: number, year: number): void;
747
  /** Disable selecting specific dates */
748
  disableSpecificDates?: Date[];
749
  /** Allow selecting multiple dates */
750
  multiMonth?: boolean;
751
  /** Number of months to display */
752
  monthCount?: number;
753
  /** Start week on Monday instead of Sunday */
754
  weekStartsOn?: 0 | 1;
755
}
756

757
interface Range {
758
  start: Date;
759
  end: Date;
760
}
761
```
762

763
### DropZone
764

765
File upload area with drag-and-drop support, file type validation, and upload progress indication.
766

767
```typescript { .api }
768
/**
769
 * File upload zone with drag and drop support
770
 * @param onDrop - File drop handler
771
 * @param children - Content to display in the drop zone
772
 * @param accept - Accepted file types
773
 * @returns JSX element with file drop zone
774
 */
775
function DropZone(props: DropZoneProps): JSX.Element;
776

777
interface DropZoneProps {
778
  /** Allowed file types */
779
  accept?: string;
780
  /** Whether or not the drop zone allows multiple files */
781
  allowMultiple?: boolean;
782
  /** Sets an active state */
783
  active?: boolean;
784
  /** Sets an error state */
785
  error?: boolean;
786
  /** Displayed when no files are uploaded */
787
  children?: React.ReactNode;
788
  /** Sets a disabled state */
789
  disabled?: boolean;
790
  /** Text that appears in the drop zone */
791
  label?: React.ReactNode;
792
  /** Text that appears in the drop zone when files are being dragged over it */
793
  labelAction?: React.ReactNode;
794
  /** Text that appears in the drop zone when files are being dragged over it */
795
  labelHidden?: boolean;
796
  /** Adds an outline to the drop zone */
797
  outline?: boolean;
798
  /** Overlays will cover the entire drop zone */
799
  overlay?: boolean;
800
  /** Sets the drop zone size */
801
  size?: 'extraLarge' | 'large' | 'medium' | 'small';
802
  /** Callback triggered on drop */
803
  onDrop?(files: File[], acceptedFiles: File[], rejectedFiles: File[]): void;
804
  /** Callback triggered when one or more files are dragged over the drop zone */
805
  onDropAccepted?(acceptedFiles: File[]): void;
806
  /** Callback triggered when one or more files are rejected */
807
  onDropRejected?(rejectedFiles: File[]): void;
808
  /** Callback triggered when files are dragged over the drop zone */
809
  onDragEnter?(): void;
810
  /** Callback triggered when files are no longer being dragged over the drop zone */
811
  onDragLeave?(): void;
812
  /** Callback triggered when files start being dragged over the drop zone */
813
  onDragOver?(): void;
814
  /** Callback triggered when the file dialog opens */
815
  onFileDialogClose?(): void;
816
  /** Callback triggered when the file dialog is canceled */
817
  onFileDialogCancel?(): void;
818
}
819
```
820

821
### Filters
822

823
Advanced filtering interface with multiple filter types, saved filters, and bulk operations for complex data filtering scenarios.
824

825
```typescript { .api }
826
/**
827
 * Advanced filtering interface with multiple filter types
828
 * @param filters - Available filter definitions
829
 * @param appliedFilters - Currently applied filters
830
 * @param onFiltersChange - Filter change handler
831
 * @returns JSX element with filtering interface
832
 */
833
function Filters(props: FiltersProps): JSX.Element;
834

835
interface FiltersProps {
836
  /** Available filters */
837
  filters: FilterInterface[];
838
  /** Currently applied filters */
839
  appliedFilters?: AppliedFilterInterface[];
840
  /** Query value */
841
  queryValue?: string;
842
  /** Placeholder text for the query field */
843
  queryPlaceholder?: string;
844
  /** Whether the query field is focused */
845
  focused?: boolean;
846
  /** Additional search field filters */
847
  searchFieldFilters?: React.ReactNode;
848
  /** Disable the query field */
849
  disabled?: boolean;
850
  /** Whether to hide the query field */
851
  hideQueryField?: boolean;
852
  /** Hide the filters */
853
  hideFilters?: boolean;
854
  /** Callback when the query changes */
855
  onQueryChange?(queryValue: string): void;
856
  /** Callback when the query field is cleared */
857
  onQueryClear?(): void;
858
  /** Callback when the query field is focused */
859
  onQueryFocus?(): void;
860
  /** Callback when the query field is blurred */
861
  onQueryBlur?(): void;
862
  /** Callback when filters are applied */
863
  onFiltersChange?(appliedFilters: AppliedFilterInterface[]): void;
864
  /** Callback when the clear all button is clicked */
865
  onClearAll?(): void;
866
}
867
```
868

869
### Labelled
870

871
Label wrapper component that provides consistent labeling, help text, and error handling for form controls.
872

873
```typescript { .api }
874
/**
875
 * Label wrapper for form controls with help text and error handling
876
 * @param label - Label text for the form control
877
 * @param children - Form control to be labeled
878
 * @param error - Error message to display
879
 * @returns JSX element with labeled form control
880
 */
881
function Labelled(props: LabelledProps): JSX.Element;
882

883
interface LabelledProps {
884
  /** A unique identifier for the label */
885
  id: string;
886
  /** Text for the label */
887
  label: React.ReactNode;
888
  /** Error to display beneath the label */
889
  error?: Error;
890
  /** An action to make the label actionable */
891
  action?: Action;
892
  /** Additional help text to display */
893
  helpText?: React.ReactNode;
894
  /** Content to display inside the connected */
895
  children?: React.ReactNode;
896
  /** Visually hide the label */
897
  labelHidden?: boolean;
898
  /** Mark the form control as required */
899
  required?: boolean;
900
  /** Disable the label and the connected field */
901
  disabled?: boolean;
902
  /** Mark the label as read only */
903
  readOnly?: boolean;
904
}
905
```