0
# UI Components
1

2
Comprehensive set of UI components for building mobile interfaces, including form controls, data display, feedback elements, and interactive components.
3

4
## Capabilities
5

6
### Form Controls
7

8
Interactive form elements with built-in validation and mobile-optimized behavior.
9

10
```typescript { .api }
11
/** Text input component with mobile-specific behavior */
12
const IonInput: React.FC<{
13
  className?: string;
14
  value?: string;
15
  placeholder?: string;
16
  type?: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url';
17
  clearInput?: boolean;
18
  disabled?: boolean;
19
  readonly?: boolean;
20
  required?: boolean;
21
  onIonInput?: (event: CustomEvent) => void;
22
  onIonChange?: (event: CustomEvent) => void;
23
  onIonBlur?: (event: CustomEvent) => void;
24
  onIonFocus?: (event: CustomEvent) => void;
25
}>;
26

27
/** Multi-line text input component */
28
const IonTextarea: React.FC<{
29
  className?: string;
30
  value?: string;
31
  placeholder?: string;
32
  rows?: number;
33
  cols?: number;
34
  disabled?: boolean;
35
  readonly?: boolean;
36
  required?: boolean;
37
  onIonInput?: (event: CustomEvent) => void;
38
  onIonChange?: (event: CustomEvent) => void;
39
}>;
40

41
/** Checkbox input component */
42
const IonCheckbox: React.FC<{
43
  className?: string;
44
  checked?: boolean;
45
  disabled?: boolean;
46
  indeterminate?: boolean;
47
  onIonChange?: (event: CustomEvent) => void;
48
}>;
49

50
/** Toggle switch input */
51
const IonToggle: React.FC<{
52
  className?: string;
53
  checked?: boolean;
54
  disabled?: boolean;
55
  onIonChange?: (event: CustomEvent) => void;
56
}>;
57

58
/** Radio button input */
59
const IonRadio: React.FC<{
60
  className?: string;
61
  value: any;
62
  disabled?: boolean;
63
  onIonSelect?: (event: CustomEvent) => void;
64
}>;
65

66
/** Radio button group */
67
const IonRadioGroup: React.FC<{
68
  className?: string;
69
  value?: any;
70
  allowEmptySelection?: boolean;
71
  onIonChange?: (event: CustomEvent) => void;
72
  children?: React.ReactNode;
73
}>;
74

75
/** Range slider input */
76
const IonRange: React.FC<{
77
  className?: string;
78
  value?: number | { lower: number; upper: number };
79
  min?: number;
80
  max?: number;
81
  step?: number;
82
  snaps?: boolean;
83
  ticks?: boolean;
84
  dual?: boolean;
85
  disabled?: boolean;
86
  onIonChange?: (event: CustomEvent) => void;
87
}>;
88
```
89

90
### Select Components
91

92
Dropdown and picker components for selecting from lists of options.
93

94
```typescript { .api }
95
/** Select dropdown component */
96
const IonSelect: React.FC<{
97
  className?: string;
98
  value?: any;
99
  placeholder?: string;
100
  multiple?: boolean;
101
  disabled?: boolean;
102
  interface?: 'alert' | 'popover' | 'action-sheet';
103
  interfaceOptions?: any;
104
  onIonChange?: (event: CustomEvent) => void;
105
  children?: React.ReactNode;
106
}>;
107

108
/** Select option item */
109
const IonSelectOption: React.FC<{
110
  className?: string;
111
  value: any;
112
  disabled?: boolean;
113
  children?: React.ReactNode;
114
}>;
115

116
/** Date/time picker component */
117
const IonDatetime: React.FC<{
118
  className?: string;
119
  value?: string;
120
  min?: string;
121
  max?: string;
122
  presentation?: 'date' | 'time' | 'date-time' | 'time-date' | 'month' | 'month-year' | 'year';
123
  showDefaultButtons?: boolean;
124
  showClearButton?: boolean;
125
  onIonChange?: (event: CustomEvent) => void;
126
}>;
127

128
/** Button to trigger datetime picker */
129
const IonDatetimeButton: React.FC<{
130
  className?: string;
131
  datetime: string;
132
  disabled?: boolean;
133
}>;
134
```
135

136
### Button Components
137

138
Interactive button components with various styles and behaviors.
139

140
```typescript { .api }
141
/** Primary button component with routing capabilities */
142
const IonButton: React.FC<{
143
  className?: string;
144
  children?: React.ReactNode;
145
  color?: string;
146
  disabled?: boolean;
147
  expand?: 'full' | 'block';
148
  fill?: 'clear' | 'outline' | 'solid';
149
  size?: 'small' | 'default' | 'large';
150
  strong?: boolean;
151
  type?: 'button' | 'submit' | 'reset';
152
  routerLink?: string;
153
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
154
  onClick?: (event: React.MouseEvent) => void;
155
}>;
156

157
/** Container for header/toolbar buttons */
158
const IonButtons: React.FC<{
159
  className?: string;
160
  children?: React.ReactNode;
161
  slot?: 'start' | 'end' | 'primary' | 'secondary';
162
}>;
163

164
/** Floating Action Button container */
165
const IonFab: React.FC<{
166
  className?: string;
167
  children?: React.ReactNode;
168
  horizontal?: 'start' | 'end' | 'center';
169
  vertical?: 'top' | 'bottom' | 'center';
170
  edge?: boolean;
171
}>;
172

173
/** Individual FAB button */
174
const IonFabButton: React.FC<{
175
  className?: string;
176
  children?: React.ReactNode;
177
  color?: string;
178
  disabled?: boolean;
179
  size?: 'small';
180
  routerLink?: string;
181
  onClick?: (event: React.MouseEvent) => void;
182
}>;
183
```
184

185
### Data Display Components
186

187
Components for displaying structured data and content.
188

189
```typescript { .api }
190
/** List container */
191
const IonList: React.FC<{
192
  className?: string;
193
  children?: React.ReactNode;
194
  inset?: boolean;
195
}>;
196

197
/** List item container with routing capabilities */
198
const IonItem: React.FC<{
199
  className?: string;
200
  children?: React.ReactNode;
201
  button?: boolean;
202
  disabled?: boolean;
203
  download?: string;
204
  href?: string;
205
  rel?: string;
206
  target?: string;
207
  type?: 'button' | 'submit' | 'reset';
208
  routerLink?: string;
209
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
210
  onClick?: (event: React.MouseEvent) => void;
211
}>;
212

213
/** Text label component */
214
const IonLabel: React.FC<{
215
  className?: string;
216
  children?: React.ReactNode;
217
  position?: 'fixed' | 'stacked' | 'floating';
218
}>;
219

220
/** Card container component */
221
const IonCard: React.FC<{
222
  className?: string;
223
  children?: React.ReactNode;
224
  button?: boolean;
225
  disabled?: boolean;
226
  download?: string;
227
  href?: string;
228
  rel?: string;
229
  target?: string;
230
  type?: 'button' | 'submit' | 'reset';
231
  routerLink?: string;
232
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
233
}>;
234

235
/** Card content area */
236
const IonCardContent: React.FC<{
237
  className?: string;
238
  children?: React.ReactNode;
239
}>;
240

241
/** Card header section */
242
const IonCardHeader: React.FC<{
243
  className?: string;
244
  children?: React.ReactNode;
245
}>;
246

247
/** Card title text */
248
const IonCardTitle: React.FC<{
249
  className?: string;
250
  children?: React.ReactNode;
251
}>;
252

253
/** Card subtitle text */
254
const IonCardSubtitle: React.FC<{
255
  className?: string;
256
  children?: React.ReactNode;
257
}>;
258
```
259

260
### Feedback and Status Components
261

262
Components for providing user feedback and displaying status information.
263

264
```typescript { .api }
265
/** Small notification badge */
266
const IonBadge: React.FC<{
267
  className?: string;
268
  children?: React.ReactNode;
269
  color?: string;
270
}>;
271

272
/** Small informational element */
273
const IonChip: React.FC<{
274
  className?: string;
275
  children?: React.ReactNode;
276
  color?: string;
277
  outline?: boolean;
278
}>;
279

280
/** Progress indicator */
281
const IonProgressBar: React.FC<{
282
  className?: string;
283
  value?: number;
284
  buffer?: number;
285
  type?: 'determinate' | 'indeterminate';
286
  reversed?: boolean;
287
  color?: string;
288
}>;
289

290
/** Loading spinner */
291
const IonSpinner: React.FC<{
292
  className?: string;
293
  color?: string;
294
  duration?: number;
295
  name?: 'bubbles' | 'circles' | 'circular' | 'crescent' | 'dots' | 'lines' | 'lines-small';
296
  paused?: boolean;
297
}>;
298

299
/** Loading placeholder text */
300
const IonSkeletonText: React.FC<{
301
  className?: string;
302
  animated?: boolean;
303
}>;
304
```
305

306
### Media Components
307

308
Components for displaying images and media content.
309

310
```typescript { .api }
311
/** Lazy-loaded image component */
312
const IonImg: React.FC<{
313
  className?: string;
314
  src?: string;
315
  alt?: string;
316
  onIonImgWillLoad?: (event: CustomEvent) => void;
317
  onIonImgDidLoad?: (event: CustomEvent) => void;
318
  onIonError?: (event: CustomEvent) => void;
319
}>;
320

321
/** Circular avatar/profile image */
322
const IonAvatar: React.FC<{
323
  className?: string;
324
  children?: React.ReactNode;
325
}>;
326

327
/** Small preview image */
328
const IonThumbnail: React.FC<{
329
  className?: string;
330
  children?: React.ReactNode;
331
}>;
332
```
333

334
### Segmented Controls
335

336
Components for creating segmented control interfaces.
337

338
```typescript { .api }
339
/** Segmented control container */
340
const IonSegment: React.FC<{
341
  className?: string;
342
  children?: React.ReactNode;
343
  value?: string;
344
  disabled?: boolean;
345
  onIonChange?: (event: CustomEvent) => void;
346
}>;
347

348
/** Individual segment button */
349
const IonSegmentButton: React.FC<{
350
  className?: string;
351
  children?: React.ReactNode;
352
  value: string;
353
  disabled?: boolean;
354
  type?: 'button' | 'submit' | 'reset';
355
}>;
356
```
357

358
### Search Components
359

360
Components for implementing search functionality.
361

362
```typescript { .api }
363
/** Search input component */
364
const IonSearchbar: React.FC<{
365
  className?: string;
366
  value?: string;
367
  placeholder?: string;
368
  showClearButton?: 'always' | 'focus' | 'never';
369
  showCancelButton?: 'always' | 'focus' | 'never';
370
  cancelButtonText?: string;
371
  clearIcon?: any;
372
  searchIcon?: any;
373
  disabled?: boolean;
374
  onIonInput?: (event: CustomEvent) => void;
375
  onIonChange?: (event: CustomEvent) => void;
376
  onIonCancel?: (event: CustomEvent) => void;
377
  onIonClear?: (event: CustomEvent) => void;
378
}>;
379
```
380

381
### Floating Action Button Components
382

383
Components for creating floating action buttons and button groups.
384

385
```typescript { .api }
386
/** Floating action button container */
387
const IonFab: React.FC<{
388
  className?: string;
389
  children?: React.ReactNode;
390
  horizontal?: 'start' | 'end' | 'center';
391
  vertical?: 'top' | 'bottom' | 'center';
392
  edge?: boolean;
393
  activated?: boolean;
394
}>;
395

396
/** Floating action button */
397
const IonFabButton: React.FC<{
398
  className?: string;
399
  children?: React.ReactNode;
400
  size?: 'small';
401
  color?: string;
402
  disabled?: boolean;
403
  activated?: boolean;
404
  closeIcon?: string;
405
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
406
  onClick?: (event: any) => void;
407
}>;
408

409
/** List of floating action buttons */
410
const IonFabList: React.FC<{
411
  className?: string;
412
  children?: React.ReactNode;
413
  activated?: boolean;
414
  side?: 'start' | 'end' | 'top' | 'bottom';
415
}>;
416
```
417

418
### Date and Time Components
419

420
Components for selecting dates and times.
421

422
```typescript { .api }
423
/** Date and time picker */
424
const IonDatetime: React.FC<{
425
  className?: string;
426
  value?: string | string[];
427
  placeholder?: string;
428
  min?: string;
429
  max?: string;
430
  disabled?: boolean;
431
  readonly?: boolean;
432
  presentation?: 'date' | 'time' | 'date-time' | 'time-date' | 'month' | 'month-year' | 'year';
433
  preferWheel?: boolean;
434
  showDefaultButtons?: boolean;
435
  showDefaultTitle?: boolean;
436
  showDefaultTimeLabel?: boolean;
437
  hourCycle?: 'h12' | 'h23';
438
  onIonChange?: (event: CustomEvent) => void;
439
  onIonCancel?: (event: CustomEvent) => void;
440
}>;
441

442
/** Button that triggers datetime picker */
443
const IonDatetimeButton: React.FC<{
444
  className?: string;
445
  datetime?: string;
446
  disabled?: boolean;
447
}>;
448
```
449

450
### Scroll and Refresh Components
451

452
Components for implementing infinite scroll and pull-to-refresh functionality.
453

454
```typescript { .api }
455
/** Infinite scroll trigger */
456
const IonInfiniteScroll: React.FC<{
457
  className?: string;
458
  children?: React.ReactNode;
459
  threshold?: string;
460
  disabled?: boolean;
461
  position?: 'top' | 'bottom';
462
  onIonInfinite?: (event: CustomEvent) => void;
463
}>;
464

465
/** Infinite scroll content */
466
const IonInfiniteScrollContent: React.FC<{
467
  className?: string;
468
  loadingSpinner?: string;
469
  loadingText?: string;
470
}>;
471

472
/** Pull-to-refresh container */
473
const IonRefresher: React.FC<{
474
  className?: string;
475
  children?: React.ReactNode;
476
  disabled?: boolean;
477
  pullFactor?: number;
478
  pullMin?: number;
479
  pullMax?: number;
480
  closeDuration?: string;
481
  snapbackDuration?: string;
482
  onIonRefresh?: (event: CustomEvent) => void;
483
}>;
484

485
/** Pull-to-refresh content */
486
const IonRefresherContent: React.FC<{
487
  className?: string;
488
  pullingIcon?: string;
489
  pullingText?: string;
490
  refreshingSpinner?: string;
491
  refreshingText?: string;
492
}>;
493
```
494

495
### Accordion Components
496

497
Expandable content sections.
498

499
```typescript { .api }
500
/** Accordion group container */
501
const IonAccordionGroup: React.FC<{
502
  className?: string;
503
  children?: React.ReactNode;
504
  animated?: boolean;
505
  multiple?: boolean;
506
  value?: string | string[];
507
  disabled?: boolean;
508
  readonly?: boolean;
509
  expand?: 'compact' | 'inset';
510
  onIonChange?: (event: CustomEvent) => void;
511
}>;
512

513
/** Individual accordion item */
514
const IonAccordion: React.FC<{
515
  className?: string;
516
  children?: React.ReactNode;
517
  value: string;
518
  disabled?: boolean;
519
  readonly?: boolean;
520
  toggleIcon?: string;
521
  toggleIconSlot?: 'start' | 'end';
522
}>;
523
```
524

525
### Reorder Components
526

527
Components for drag-and-drop reordering of list items.
528

529
```typescript { .api }
530
/** Reorderable list container */
531
const IonReorderGroup: React.FC<{
532
  className?: string;
533
  children?: React.ReactNode;
534
  disabled?: boolean;
535
  onIonItemReorder?: (event: CustomEvent) => void;
536
}>;
537

538
/** Reorder handle */
539
const IonReorder: React.FC<{
540
  className?: string;
541
  children?: React.ReactNode;
542
}>;
543
```
544

545
### Picker Components
546

547
Column-based picker components.
548

549
```typescript { .api }
550
/** Picker container */
551
const IonPicker: React.FC<{
552
  className?: string;
553
  children?: React.ReactNode;
554
}>;
555

556
/** Picker column */
557
const IonPickerColumn: React.FC<{
558
  className?: string;
559
  children?: React.ReactNode;
560
}>;
561

562
/** Picker column option */
563
const IonPickerColumnOption: React.FC<{
564
  className?: string;
565
  children?: React.ReactNode;
566
  value?: any;
567
  disabled?: boolean;
568
}>;
569
```
570

571
### Breadcrumb Components
572

573
Navigation breadcrumb components.
574

575
```typescript { .api }
576
/** Breadcrumb navigation container */
577
const IonBreadcrumbs: React.FC<{
578
  className?: string;
579
  children?: React.ReactNode;
580
  color?: string;
581
  maxItems?: number;
582
  itemsAfterCollapse?: number;
583
  itemsBeforeCollapse?: number;
584
}>;
585

586
/** Individual breadcrumb item */
587
const IonBreadcrumb: React.FC<{
588
  className?: string;
589
  children?: React.ReactNode;
590
  href?: string;
591
  target?: string;
592
  download?: string;
593
  rel?: string;
594
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
595
  routerAnimation?: any;
596
  active?: boolean;
597
  disabled?: boolean;
598
}>;
599
```
600

601
### Additional Components
602

603
Other utility and interactive components.
604

605
```typescript { .api }
606
/** Ripple effect overlay */
607
const IonRippleEffect: React.FC<{
608
  className?: string;
609
  type?: 'bounded' | 'unbounded';
610
}>;
611

612
/** Split pane layout */
613
const IonSplitPane: React.FC<{
614
  className?: string;
615
  children?: React.ReactNode;
616
  contentId?: string;
617
  disabled?: boolean;
618
  when?: string | boolean;
619
  onIonSplitPaneVisible?: (event: CustomEvent) => void;
620
}>;
621

622
/** Backdrop overlay */
623
const IonBackdrop: React.FC<{
624
  className?: string;
625
  tappable?: boolean;
626
  stopPropagation?: boolean;
627
  visible?: boolean;
628
  onIonBackdropTap?: (event: CustomEvent) => void;
629
}>;
630
```
631

632
**Usage Examples:**
633

634
```typescript
635
import React, { useState } from 'react';
636
import { 
637
  IonInput, IonButton, IonCheckbox, IonItem, IonLabel, 
638
  IonList, IonCard, IonCardContent, IonCardHeader, IonCardTitle 
639
} from '@ionic/react';
640

641
const FormExample: React.FC = () => {
642
  const [name, setName] = useState('');
643
  const [agreed, setAgreed] = useState(false);
644

645
  return (
646
    <IonList>
647
      <IonItem>
648
        <IonLabel position="stacked">Name</IonLabel>
649
        <IonInput 
650
          value={name}
651
          onIonInput={(e) => setName(e.detail.value!)}
652
          placeholder="Enter your name"
653
        />
654
      </IonItem>
655
      
656
      <IonItem>
657
        <IonCheckbox 
658
          checked={agreed}
659
          onIonChange={(e) => setAgreed(e.detail.checked)}
660
        />
661
        <IonLabel>I agree to the terms</IonLabel>
662
      </IonItem>
663
      
664
      <IonItem>
665
        <IonButton 
666
          expand="block" 
667
          disabled={!name || !agreed}
668
        >
669
          Submit
670
        </IonButton>
671
      </IonItem>
672
    </IonList>
673
  );
674
};
675

676
const CardExample: React.FC = () => (
677
  <IonCard>
678
    <IonCardHeader>
679
      <IonCardTitle>Welcome</IonCardTitle>
680
    </IonCardHeader>
681
    <IonCardContent>
682
      This is a sample card with content.
683
    </IonCardContent>
684
  </IonCard>
685
);
686
```