0
# Form Components
1

2
Interactive form controls including checkboxes, sliders, search bars, and switches for user input with platform-specific styling and behavior.
3

4
## Capabilities
5

6
### SearchBar
7

8
Platform-specific search input component that adapts its appearance and behavior based on the target platform (iOS, Android, or default).
9

10
```typescript { .api }
11
/**
12
 * Platform-specific search input component
13
 */
14
interface SearchBarProps {
15
  /** Platform-specific styling */
16
  platform: 'default' | 'ios' | 'android';
17
  /** Placeholder text */
18
  placeholder?: string;
19
  /** Current search value */
20
  value?: string;
21
  /** Show loading indicator */
22
  showLoading?: boolean;
23
  /** Custom clear button icon */
24
  clearIcon?: IconNode;
25
  /** Custom search icon */
26
  searchIcon?: IconNode;
27
  /** Container styles */
28
  containerStyle?: StyleProp<ViewStyle>;
29
  /** Input container styles */
30
  inputContainerStyle?: StyleProp<ViewStyle>;
31
  /** Input text styles */
32
  inputStyle?: StyleProp<TextStyle>;
33
  /** Text change handler */
34
  onChangeText?(text: string): void;
35
  /** Clear button handler */
36
  onClear?(): void;
37
  /** Focus handler */
38
  onFocus?(): void;
39
  /** Blur handler */
40
  onBlur?(): void;
41
  /** Cancel handler (iOS) */
42
  onCancel?(): void;
43
}
44

45
/**
46
 * SearchBar component methods
47
 */
48
interface SearchBarMethods {
49
  /** Focus the search input */
50
  focus(): void;
51
  /** Blur the search input */
52
  blur(): void;
53
  /** Clear the search text */
54
  clear(): void;
55
  /** Cancel search (iOS platform) */
56
  cancel(): void;
57
}
58

59
/**
60
 * Android-specific search bar props
61
 */
62
interface SearchBarAndroidProps extends SearchBarProps {
63
  platform: 'android';
64
  /** Cancel button title */
65
  cancelButtonTitle?: string;
66
  /** Cancel button props */
67
  cancelButtonProps?: ButtonProps;
68
}
69

70
/**
71
 * iOS-specific search bar props
72
 */
73
interface SearchBarIosProps extends SearchBarProps {
74
  platform: 'ios';
75
  /** Cancel button title */
76
  cancelButtonTitle?: string;
77
  /** Cancel button props */
78
  cancelButtonProps?: ButtonProps;
79
  /** Show cancel button */
80
  showCancel?: boolean;
81
}
82

83
/**
84
 * Default platform search bar props
85
 */
86
interface SearchBarDefaultProps extends SearchBarProps {
87
  platform: 'default';
88
  /** Search button props */
89
  searchIcon?: IconNode;
90
  /** Clear button props */
91
  clearIcon?: IconNode;
92
}
93
```
94

95
**Usage Examples:**
96

97
```typescript
98
import React, { useState, useRef } from 'react';
99
import { SearchBar } from 'react-native-elements';
100

101
// iOS-style search bar
102
const [search, setSearch] = useState('');
103

104
<SearchBar
105
  platform="ios"
106
  placeholder="Search..."
107
  onChangeText={setSearch}
108
  value={search}
109
  showCancel
110
  cancelButtonTitle="Cancel"
111
/>
112

113
// Android-style search bar
114
<SearchBar
115
  platform="android"
116
  placeholder="Search users..."
117
  onChangeText={updateSearch}
118
  value={searchValue}
119
  showLoading={isLoading}
120
/>
121

122
// Default search bar with custom icons
123
<SearchBar
124
  platform="default"
125
  placeholder="Search products..."
126
  onChangeText={handleSearch}
127
  value={searchTerm}
128
  searchIcon={{ type: 'material', name: 'search' }}
129
  clearIcon={{ type: 'material', name: 'close' }}
130
  containerStyle={{ backgroundColor: '#f8f9fa' }}
131
  inputContainerStyle={{ backgroundColor: '#fff' }}
132
/>
133

134
// Search bar with methods
135
const searchRef = useRef<SearchBar>(null);
136

137
const focusSearch = () => {
138
  searchRef.current?.focus();
139
};
140

141
const clearSearch = () => {
142
  searchRef.current?.clear();
143
  setSearch('');
144
};
145

146
<SearchBar
147
  ref={searchRef}
148
  platform="default"
149
  placeholder="Search..."
150
  value={search}
151
  onChangeText={setSearch}
152
/>
153
```
154

155
### CheckBox
156

157
Customizable checkbox input component with various styles, icons, and states for form controls and selection interfaces.
158

159
```typescript { .api }
160
/**
161
 * Customizable checkbox input
162
 */
163
interface CheckBoxProps extends TouchableOpacityProps {
164
  /** Checked state */
165
  checked?: boolean;
166
  /** Title text or component */
167
  title?: string | React.ReactElement;
168
  /** Icon style (square or circular) */
169
  iconType?: 'material-icons' | 'material-community' | 'font-awesome' | 'octicon' | 'ionicon' | 'foundation' | 'evilicon' | 'simple-line-icon' | 'zocial' | 'entypo' | 'feather' | 'antdesign';
170
  /** Checked state icon */
171
  checkedIcon?: IconNode;
172
  /** Unchecked state icon */
173
  uncheckedIcon?: IconNode;
174
  /** Checked state color */
175
  checkedColor?: string;
176
  /** Unchecked state color */
177
  uncheckedColor?: string;
178
  /** Title text styles */
179
  textStyle?: StyleProp<TextStyle>;
180
  /** Container styles */
181
  containerStyle?: StyleProp<ViewStyle>;
182
  /** Wrapper styles */
183
  wrapperStyle?: StyleProp<ViewStyle>;
184
  /** Icon styles */
185
  iconStyle?: StyleProp<ViewStyle>;
186
  /** Right-aligned checkbox */
187
  right?: boolean;
188
  /** Center-aligned title */
189
  center?: boolean;
190
  /** Custom touchable component */
191
  Component?: typeof React.Component;
192
  /** Font family for icons */
193
  fontFamily?: string;
194
  /** Icon size */
195
  size?: number;
196
}
197
```
198

199
**Usage Examples:**
200

201
```typescript
202
import React, { useState } from 'react';
203
import { CheckBox } from 'react-native-elements';
204

205
// Basic checkbox
206
const [isChecked, setIsChecked] = useState(false);
207

208
<CheckBox
209
  title="Accept Terms and Conditions"
210
  checked={isChecked}
211
  onPress={() => setIsChecked(!isChecked)}
212
/>
213

214
// Checkbox with custom icons
215
<CheckBox
216
  title="Custom Icons"
217
  checked={isSelected}
218
  onPress={() => setIsSelected(!isSelected)}
219
  checkedIcon="check-square"
220
  uncheckedIcon="square"
221
  iconType="font-awesome"
222
  checkedColor="#27ae60"
223
/>
224

225
// Right-aligned checkbox
226
<CheckBox
227
  title="Right Aligned"
228
  checked={rightChecked}
229
  onPress={() => setRightChecked(!rightChecked)}
230
  right
231
  containerStyle={{ backgroundColor: 'transparent', borderWidth: 0 }}
232
/>
233

234
// Checkbox with custom styling
235
<CheckBox
236
  title="Styled Checkbox"
237
  checked={styledChecked}
238
  onPress={() => setStyledChecked(!styledChecked)}
239
  textStyle={{ fontSize: 18, fontWeight: 'normal' }}
240
  containerStyle={{
241
    backgroundColor: '#f8f9fa',
242
    borderRadius: 5,
243
    padding: 15,
244
  }}
245
  checkedColor="#007AFF"
246
  size={25}
247
/>
248

249
// Circular checkbox variant
250
<CheckBox
251
  title="Circular Style"
252
  checked={circularChecked}
253
  onPress={() => setCircularChecked(!circularChecked)}
254
  checkedIcon="dot-circle-o"
255
  uncheckedIcon="circle-o"
256
  iconType="font-awesome"
257
/>
258
```
259

260
### Slider
261

262
Range input slider control component for selecting numeric values within a specified range with customizable appearance and behavior.
263

264
```typescript { .api }
265
/**
266
 * Range input slider control
267
 */
268
interface SliderProps {
269
  /** Current slider value */
270
  value?: number;
271
  /** Minimum value */
272
  minimumValue?: number;
273
  /** Maximum value */
274
  maximumValue?: number;
275
  /** Value change step */
276
  step?: number;
277
  /** Minimum track tint color */
278
  minimumTrackTintColor?: string;
279
  /** Maximum track tint color */
280
  maximumTrackTintColor?: string;
281
  /** Thumb tint color */
282
  thumbTintColor?: string;
283
  /** Thumb styles */
284
  thumbStyle?: StyleProp<ViewStyle>;
285
  /** Track styles */
286
  trackStyle?: StyleProp<ViewStyle>;
287
  /** Container styles */
288
  style?: StyleProp<ViewStyle>;
289
  /** Value change handler */
290
  onValueChange?(value: number): void;
291
  /** Sliding start handler */
292
  onSlidingStart?(value: number): void;
293
  /** Sliding complete handler */
294
  onSlidingComplete?(value: number): void;
295
  /** Disabled state */
296
  disabled?: boolean;
297
  /** Custom thumb component */
298
  thumbComponent?: React.ReactElement;
299
  /** Allow touch to track */
300
  allowTouchTrack?: boolean;
301
  /** Orientation */
302
  orientation?: 'horizontal' | 'vertical';
303
  /** Debug mode */
304
  debugTouchArea?: boolean;
305
  /** Animate transitions */
306
  animateTransitions?: boolean;
307
  /** Animation type */
308
  animationType?: 'spring' | 'timing';
309
  /** Animation config */
310
  animationConfig?: any;
311
}
312
```
313

314
**Usage Examples:**
315

316
```typescript
317
import React, { useState } from 'react';
318
import { Slider, Text } from 'react-native-elements';
319

320
// Basic slider
321
const [sliderValue, setSliderValue] = useState(50);
322

323
<View>
324
  <Text>Value: {sliderValue}</Text>
325
  <Slider
326
    value={sliderValue}
327
    onValueChange={setSliderValue}
328
    minimumValue={0}
329
    maximumValue={100}
330
    step={1}
331
    thumbStyle={{ backgroundColor: '#007AFF' }}
332
    trackStyle={{ backgroundColor: '#d3d3d3' }}
333
    minimumTrackTintColor="#007AFF"
334
  />
335
</View>
336

337
// Range slider with custom styling
338
const [rangeValue, setRangeValue] = useState(25);
339

340
<Slider
341
  value={rangeValue}
342
  onValueChange={setRangeValue}
343
  minimumValue={0}
344
  maximumValue={100}
345
  step={5}
346
  thumbStyle={{
347
    backgroundColor: '#FF6B6B',
348
    borderWidth: 2,
349
    borderColor: '#fff',
350
    width: 30,
351
    height: 30,
352
  }}
353
  trackStyle={{
354
    height: 8,
355
    borderRadius: 4,
356
  }}
357
  minimumTrackTintColor="#FF6B6B"
358
  maximumTrackTintColor="#E0E0E0"
359
  style={{ margin: 20 }}
360
/>
361

362
// Slider with step values and callbacks
363
const [temperature, setTemperature] = useState(22);
364

365
<View>
366
  <Text h4>Temperature: {temperature}°C</Text>
367
  <Slider
368
    value={temperature}
369
    onValueChange={setTemperature}
370
    onSlidingStart={(value) => console.log('Started:', value)}
371
    onSlidingComplete={(value) => console.log('Completed:', value)}
372
    minimumValue={16}
373
    maximumValue={30}
374
    step={0.5}
375
    thumbStyle={{ backgroundColor: '#e67e22' }}
376
    minimumTrackTintColor="#e67e22"
377
  />
378
</View>
379

380
// Vertical slider
381
<View style={{ height: 200 }}>
382
  <Slider
383
    value={verticalValue}
384
    onValueChange={setVerticalValue}
385
    orientation="vertical"
386
    minimumValue={0}
387
    maximumValue={100}
388
    thumbStyle={{ backgroundColor: '#9b59b6' }}
389
    minimumTrackTintColor="#9b59b6"
390
  />
391
</View>
392
```
393

394
### Switch
395

396
Toggle switch component for binary state control with platform-specific styling and customization options.
397

398
```typescript { .api }
399
/**
400
 * Toggle switch component
401
 */
402
interface SwitchProps {
403
  /** Switch value/state */
404
  value?: boolean;
405
  /** Value change handler */
406
  onValueChange?(value: boolean): void;
407
  /** Disabled state */
408
  disabled?: boolean;
409
  /** Track color when switch is false */
410
  trackColor?: {
411
    false?: string;
412
    true?: string;
413
  };
414
  /** Thumb color */
415
  thumbColor?: string;
416
  /** iOS background color */
417
  ios_backgroundColor?: string;
418
  /** Container styles */
419
  style?: StyleProp<ViewStyle>;
420
}
421
```
422

423
**Usage Examples:**
424

425
```typescript
426
import React, { useState } from 'react';
427
import { Switch, ListItem } from 'react-native-elements';
428

429
// Basic switch
430
const [isEnabled, setIsEnabled] = useState(false);
431

432
<Switch
433
  value={isEnabled}
434
  onValueChange={setIsEnabled}
435
/>
436

437
// Switch with custom colors
438
const [darkMode, setDarkMode] = useState(false);
439

440
<Switch
441
  value={darkMode}
442
  onValueChange={setDarkMode}
443
  trackColor={{ false: '#767577', true: '#81b0ff' }}
444
  thumbColor={darkMode ? '#f5dd4b' : '#f4f3f4'}
445
  ios_backgroundColor="#3e3e3e"
446
/>
447

448
// Switch in list item
449
<ListItem bottomDivider>
450
  <ListItem.Content>
451
    <ListItem.Title>Enable Notifications</ListItem.Title>
452
    <ListItem.Subtitle>Receive push notifications</ListItem.Subtitle>
453
  </ListItem.Content>
454
  <Switch
455
    value={notifications}
456
    onValueChange={setNotifications}
457
    trackColor={{ false: '#ccc', true: '#007AFF' }}
458
    thumbColor="#fff"
459
  />
460
</ListItem>
461

462
// Disabled switch
463
<Switch
464
  value={false}
465
  disabled
466
  trackColor={{ false: '#e0e0e0', true: '#e0e0e0' }}
467
  thumbColor="#bbb"
468
/>
469

470
// Switch with label
471
<View style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}>
472
  <Text style={{ flex: 1 }}>Auto-sync Data</Text>
473
  <Switch
474
    value={autoSync}
475
    onValueChange={setAutoSync}
476
    trackColor={{ false: '#ccc', true: '#4caf50' }}
477
  />
478
</View>
479
```
480

481
### ButtonGroup
482

483
Group of related buttons with single or multiple selection support for creating segmented controls and option selectors.
484

485
```typescript { .api }
486
/**
487
 * Group of related buttons with single selection
488
 */
489
interface ButtonGroupProps {
490
  /** Button labels */
491
  buttons: (string | React.ReactElement)[];
492
  /** Selected button index */
493
  selectedIndex?: number;
494
  /** Selection handler */
495
  onPress?(selectedIndex: number): void;
496
  /** Multiple selection indices */
497
  selectedIndexes?: number[];
498
  /** Multiple selection handler */
499
  onHideUnderlay?(): void;
500
  /** Button styles */
501
  buttonStyle?: StyleProp<ViewStyle>;
502
  /** Container styles */
503
  containerStyle?: StyleProp<ViewStyle>;
504
  /** Text styles */
505
  textStyle?: StyleProp<TextStyle>;
506
  /** Selected button styles */
507
  selectedButtonStyle?: StyleProp<ViewStyle>;
508
  /** Selected text styles */
509
  selectedTextStyle?: StyleProp<TextStyle>;
510
  /** Underlay color */
511
  underlayColor?: string;
512
  /** Active opacity */
513
  activeOpacity?: number;
514
  /** Border radius */
515
  borderRadius?: number;
516
  /** Container border radius */
517
  containerBorderRadius?: number;
518
  /** Disabled state */
519
  disabled?: boolean | number[];
520
  /** Disabled button styles */
521
  disabledStyle?: StyleProp<ViewStyle>;
522
  /** Disabled text styles */
523
  disabledTextStyle?: StyleProp<TextStyle>;
524
  /** Inner border styles */
525
  innerBorderStyle?: {
526
    color?: string;
527
    width?: number;
528
  };
529
  /** Last button styles */
530
  lastBorderStyle?: StyleProp<ViewStyle>;
531
  /** Vertical layout */
532
  vertical?: boolean;
533
  /** Custom touchable component */
534
  Component?: typeof React.Component;
535
}
536
```
537

538
**Usage Examples:**
539

540
```typescript
541
import React, { useState } from 'react';
542
import { ButtonGroup } from 'react-native-elements';
543

544
// Basic button group
545
const buttons = ['Tab 1', 'Tab 2', 'Tab 3'];
546
const [selectedIndex, setSelectedIndex] = useState(0);
547

548
<ButtonGroup
549
  buttons={buttons}
550
  selectedIndex={selectedIndex}
551
  onPress={setSelectedIndex}
552
  containerStyle={{ marginBottom: 20 }}
553
/>
554

555
// Custom styled button group
556
<ButtonGroup
557
  buttons={['Option A', 'Option B', 'Option C']}
558
  selectedIndex={selectedOption}
559
  onPress={setSelectedOption}
560
  buttonStyle={{
561
    backgroundColor: '#f8f9fa',
562
  }}
563
  selectedButtonStyle={{
564
    backgroundColor: '#007AFF',
565
  }}
566
  textStyle={{
567
    color: '#666',
568
  }}
569
  selectedTextStyle={{
570
    color: '#fff',
571
    fontWeight: 'bold',
572
  }}
573
  containerStyle={{
574
    borderRadius: 10,
575
    marginHorizontal: 20,
576
  }}
577
/>
578

579
// Vertical button group
580
<ButtonGroup
581
  buttons={['Small', 'Medium', 'Large']}
582
  selectedIndex={size}
583
  onPress={setSize}
584
  vertical
585
  containerStyle={{
586
    width: 150,
587
  }}
588
/>
589

590
// Button group with icons
591
const iconButtons = [
592
  <Icon name="list" type="material" color="#666" />,
593
  <Icon name="grid-on" type="material" color="#666" />,
594
  <Icon name="view-carousel" type="material" color="#666" />
595
];
596

597
<ButtonGroup
598
  buttons={iconButtons}
599
  selectedIndex={viewMode}
600
  onPress={setViewMode}
601
  selectedButtonStyle={{ backgroundColor: '#007AFF' }}
602
/>
603

604
// Disabled buttons
605
<ButtonGroup
606
  buttons={['Available', 'Disabled', 'Available']}
607
  selectedIndex={0}
608
  onPress={setSelectedIndex}
609
  disabled={[1]} // Disable second button
610
  disabledStyle={{
611
    backgroundColor: '#e0e0e0',
612
  }}
613
  disabledTextStyle={{
614
    color: '#999',
615
  }}
616
/>
617
```