0
# Form Components
1

2
Input controls, buttons, and form management components with built-in validation support and accessibility features.
3

4
## Capabilities
5

6
### Button Component
7

8
Interactive button component with various styles and states.
9

10
```typescript { .api }
11
/**
12
 * Interactive button component with styling and state management
13
 * @param props - Button component props
14
 * @returns JSX element representing a pressable button
15
 */
16
function Button(props: IButtonProps): JSX.Element;
17

18
interface IButtonProps extends StyledProps {
19
  children?: React.ReactNode;
20
  onPress?: () => void;
21
  isDisabled?: boolean;
22
  isLoading?: boolean;
23
  loadingText?: string;
24
  spinner?: JSX.Element;
25
  variant?: "ghost" | "outline" | "solid" | "link" | "unstyled";
26
  colorScheme?: string;
27
  size?: "xs" | "sm" | "md" | "lg";
28
  leftIcon?: JSX.Element;
29
  rightIcon?: JSX.Element;
30
  startIcon?: JSX.Element;
31
  endIcon?: JSX.Element;
32
  _text?: ITextProps;
33
  _stack?: IStackProps;
34
  _loading?: ISpinnerProps;
35
  isPressed?: boolean;
36
  isFocused?: boolean;
37
  isHovered?: boolean;
38
  isDisabled?: boolean;
39
}
40
```
41

42
**Usage Examples:**
43

44
```typescript
45
import { Button, AddIcon } from "native-base";
46

47
// Basic button
48
<Button onPress={() => console.log("pressed")}>
49
  Click me
50
</Button>
51

52
// Button with variant and color scheme
53
<Button variant="outline" colorScheme="blue" size="lg">
54
  Large Outline Button
55
</Button>
56

57
// Button with icons
58
<Button leftIcon={<AddIcon />} onPress={handleAdd}>
59
  Add Item
60
</Button>
61

62
// Loading button
63
<Button isLoading loadingText="Submitting...">
64
  Submit
65
</Button>
66
```
67

68
### IconButton Component
69

70
Interactive button component specifically designed for displaying only an icon with various styles and interaction states.
71

72
```typescript { .api }
73
/**
74
 * Interactive button component that displays only an icon
75
 * @param props - IconButton component props
76
 * @returns JSX element representing a pressable icon button
77
 */
78
function IconButton(props: IIconButtonProps): JSX.Element;
79

80
interface IIconButtonProps extends StyledProps {
81
  icon?: JSX.Element;
82
  _icon?: Partial<IIconProps>;
83
  colorScheme?: string;
84
  variant?: "ghost" | "outline" | "solid" | "unstyled";
85
  size?: "xs" | "sm" | "md" | "lg";
86
  isDisabled?: boolean;
87
  onPress?: () => void;
88
  _hover?: Partial<IIconButtonProps>;
89
  _pressed?: Partial<IIconButtonProps>;
90
  _focus?: Partial<IIconButtonProps>;
91
}
92
```
93

94
**Usage Examples:**
95

96
```typescript
97
import { IconButton, AddIcon, EditIcon, DeleteIcon } from "native-base";
98

99
// Basic icon button
100
<IconButton
101
  icon={<AddIcon />}
102
  onPress={() => console.log("Add pressed")}
103
/>
104

105
// Icon button with variant and color scheme
106
<IconButton
107
  icon={<EditIcon />}
108
  variant="outline"
109
  colorScheme="blue"
110
  onPress={() => console.log("Edit pressed")}
111
/>
112

113
// Icon button with custom styling and states
114
<IconButton
115
  icon={<DeleteIcon />}
116
  colorScheme="red"
117
  variant="solid"
118
  size="sm"
119
  _hover={{ bg: "red.600" }}
120
  _pressed={{ bg: "red.700" }}
121
  onPress={() => console.log("Delete pressed")}
122
/>
123

124
// Icon button with custom icon styling
125
<IconButton
126
  icon={<AddIcon />}
127
  _icon={{ size: "lg", color: "primary.500" }}
128
  variant="ghost"
129
  onPress={() => console.log("Custom icon pressed")}
130
/>
131
```
132

133
### Input Component
134

135
Text input component with various configurations and validation support.
136

137
```typescript { .api }
138
/**
139
 * Text input component with styling and validation capabilities
140
 * @param props - Input component props
141
 * @returns JSX element representing a text input field
142
 */
143
function Input(props: IInputProps): JSX.Element;
144

145
/**
146
 * Input group container for combining input with addons
147
 * @param props - Box component props
148
 * @returns JSX element containing grouped input elements
149
 */
150
function InputGroup(props: IBoxProps): JSX.Element;
151

152
/**
153
 * Left addon for input groups
154
 * @param props - Box component props
155
 * @returns JSX element positioned as left addon
156
 */
157
function InputLeftAddon(props: IBoxProps): JSX.Element;
158

159
/**
160
 * Right addon for input groups
161
 * @param props - Box component props
162
 * @returns JSX element positioned as right addon
163
 */
164
function InputRightAddon(props: IBoxProps): JSX.Element;
165

166
interface IInputProps extends StyledProps {
167
  value?: string;
168
  defaultValue?: string;
169
  onChangeText?: (text: string) => void;
170
  placeholder?: string;
171
  placeholderTextColor?: string;
172
  isDisabled?: boolean;
173
  isReadOnly?: boolean;
174
  isRequired?: boolean;
175
  isInvalid?: boolean;
176
  variant?: "outline" | "filled" | "underlined" | "unstyled" | "rounded";
177
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
178
  type?: "text" | "password";
179
  InputLeftElement?: JSX.Element;
180
  InputRightElement?: JSX.Element;
181
  leftElement?: JSX.Element;
182
  rightElement?: JSX.Element;
183
  // Text input props
184
  multiline?: boolean;
185
  numberOfLines?: number;
186
  secureTextEntry?: boolean;
187
  keyboardType?: "default" | "numeric" | "email-address" | "phone-pad";
188
  autoCapitalize?: "none" | "sentences" | "words" | "characters";
189
  autoComplete?: string;
190
  autoCorrect?: boolean;
191
  autoFocus?: boolean;
192
  blurOnSubmit?: boolean;
193
  editable?: boolean;
194
  maxLength?: number;
195
  onBlur?: () => void;
196
  onFocus?: () => void;
197
  onSubmitEditing?: () => void;
198
  returnKeyType?: "default" | "done" | "go" | "next" | "search" | "send";
199
  selectTextOnFocus?: boolean;
200
  textContentType?: string;
201
}
202
```
203

204
**Usage Examples:**
205

206
```typescript
207
import { Input, InputGroup, InputLeftAddon, SearchIcon } from "native-base";
208

209
// Basic input
210
<Input 
211
  placeholder="Enter your name"
212
  value={name}
213
  onChangeText={setName}
214
/>
215

216
// Input with validation states
217
<Input 
218
  isInvalid={hasError}
219
  placeholder="Email"
220
  keyboardType="email-address"
221
/>
222

223
// Input group with addon
224
<InputGroup>
225
  <InputLeftAddon children="https://" />
226
  <Input placeholder="website.com" />
227
</InputGroup>
228

229
// Input with elements
230
<Input 
231
  placeholder="Search"
232
  InputLeftElement={<SearchIcon ml={2} color="gray.400" />}
233
/>
234
```
235

236
### TextArea Component
237

238
Multi-line text input component.
239

240
```typescript { .api }
241
/**
242
 * Multi-line text input component
243
 * @param props - TextArea component props
244
 * @returns JSX element representing a multi-line text input
245
 */
246
function TextArea(props: ITextAreaProps): JSX.Element;
247

248
interface ITextAreaProps extends IInputProps {
249
  numberOfLines?: number;
250
  totalLines?: number;
251
  autoCompleteType?: string;
252
}
253
```
254

255
### Checkbox Component
256

257
Checkbox input component with group support.
258

259
```typescript { .api }
260
/**
261
 * Checkbox input component for boolean selections
262
 * @param props - Checkbox component props
263
 * @returns JSX element representing a checkbox input
264
 */
265
function Checkbox(props: ICheckboxProps): JSX.Element;
266

267
interface ICheckboxProps extends StyledProps {
268
  children?: React.ReactNode;
269
  value?: string;
270
  defaultIsChecked?: boolean;
271
  isChecked?: boolean;
272
  isDisabled?: boolean;
273
  isInvalid?: boolean;
274
  isReadOnly?: boolean;
275
  onChange?: (isChecked: boolean) => void;
276
  colorScheme?: string;
277
  size?: "sm" | "md" | "lg";
278
  icon?: JSX.Element;
279
  _icon?: IIconProps;
280
  _text?: ITextProps;
281
  _interactionBox?: IBoxProps;
282
  accessibilityLabel?: string;
283
}
284

285
interface ICheckboxGroupProps extends StyledProps {
286
  value?: string[];
287
  defaultValue?: string[];
288
  onChange?: (values: string[]) => void;
289
  colorScheme?: string;
290
  size?: "sm" | "md" | "lg";
291
  isDisabled?: boolean;
292
  children?: React.ReactNode;
293
}
294
```
295

296
**Usage Examples:**
297

298
```typescript
299
import { Checkbox, VStack } from "native-base";
300

301
// Basic checkbox
302
<Checkbox value="agree" onChange={setAgreed}>
303
  I agree to terms and conditions
304
</Checkbox>
305

306
// Checkbox group
307
<Checkbox.Group defaultValue={["item1"]} onChange={setSelectedItems}>
308
  <VStack space={2}>
309
    <Checkbox value="item1">Item 1</Checkbox>
310
    <Checkbox value="item2">Item 2</Checkbox>
311
    <Checkbox value="item3">Item 3</Checkbox>
312
  </VStack>
313
</Checkbox.Group>
314
```
315

316
### Radio Component
317

318
Radio button component with group support.
319

320
```typescript { .api }
321
/**
322
 * Radio button component for single selections
323
 * @param props - Radio component props
324
 * @returns JSX element representing a radio button
325
 */
326
function Radio(props: IRadioProps): JSX.Element;
327

328
/**
329
 * Context provider for radio groups
330
 */
331
const RadioContext: React.Context<IRadioValue>;
332

333
interface IRadioProps extends StyledProps {
334
  children?: React.ReactNode;
335
  value: string;
336
  colorScheme?: string;
337
  size?: "sm" | "md" | "lg";
338
  isDisabled?: boolean;
339
  isInvalid?: boolean;
340
  icon?: JSX.Element;
341
  _icon?: IIconProps;
342
  _text?: ITextProps;
343
  _interactionBox?: IBoxProps;
344
}
345

346
interface IRadioGroupProps extends StyledProps {
347
  name: string;
348
  value?: string;
349
  defaultValue?: string;
350
  onChange?: (value: string) => void;
351
  colorScheme?: string;
352
  size?: "sm" | "md" | "lg";
353
  isDisabled?: boolean;
354
  children?: React.ReactNode;
355
}
356

357
interface IRadioValue {
358
  name: string;
359
  value: string;
360
  onChange: (value: string) => void;
361
}
362
```
363

364
### Switch Component
365

366
Toggle switch component for boolean values.
367

368
```typescript { .api }
369
/**
370
 * Toggle switch component for boolean selections
371
 * @param props - Switch component props
372
 * @returns JSX element representing a toggle switch
373
 */
374
function Switch(props: ISwitchProps): JSX.Element;
375

376
interface ISwitchProps extends StyledProps {
377
  value?: boolean;
378
  defaultIsChecked?: boolean;
379
  isChecked?: boolean;
380
  isDisabled?: boolean;
381
  isInvalid?: boolean;
382
  onChange?: (isChecked: boolean) => void;
383
  onToggle?: () => void;
384
  colorScheme?: string;
385
  size?: "sm" | "md" | "lg";
386
  trackColor?: { false?: string; true?: string };
387
  thumbColor?: string;
388
  ios_backgroundColor?: string;
389
  onTrackColor?: string;
390
  offTrackColor?: string;
391
  onThumbColor?: string;
392
  offThumbColor?: string;
393
}
394
```
395

396
### Select Component
397

398
Dropdown selection component with item support.
399

400
```typescript { .api }
401
/**
402
 * Dropdown selection component
403
 * @param props - Select component props
404
 * @returns JSX element representing a dropdown select
405
 */
406
function Select(props: ISelectProps): JSX.Element;
407

408
interface ISelectProps extends IInputProps {
409
  selectedValue?: string;
410
  defaultValue?: string;
411
  onValueChange?: (value: string) => void;
412
  placeholder?: string;
413
  placeholderTextColor?: string;
414
  dropdownIcon?: JSX.Element;
415
  dropdownOpenIcon?: JSX.Element;
416
  dropdownCloseIcon?: JSX.Element;
417
  customDropdownIconProps?: IIconProps;
418
  children?: React.ReactNode;
419
  accessibilityLabel?: string;
420
}
421

422
interface ISelectItemProps extends StyledProps {
423
  label: string;
424
  value: string;
425
  isDisabled?: boolean;
426
  children?: React.ReactNode;
427
  _text?: ITextProps;
428
}
429
```
430

431
**Usage Example:**
432

433
```typescript
434
import { Select } from "native-base";
435

436
<Select 
437
  selectedValue={selectedValue} 
438
  placeholder="Choose option"
439
  onValueChange={setSelectedValue}
440
>
441
  <Select.Item label="Option 1" value="option1" />
442
  <Select.Item label="Option 2" value="option2" />
443
  <Select.Item label="Option 3" value="option3" />
444
</Select>
445
```
446

447
### Slider Component
448

449
Range slider component for numeric input.
450

451
```typescript { .api }
452
/**
453
 * Range slider component for numeric value selection
454
 * @param props - Slider component props
455
 * @returns JSX element representing a range slider
456
 */
457
function Slider(props: ISliderProps): JSX.Element;
458

459
interface ISliderProps extends StyledProps {
460
  value?: number;
461
  defaultValue?: number;
462
  onChange?: (value: number) => void;
463
  onChangeEnd?: (value: number) => void;
464
  min?: number;
465
  max?: number;
466
  step?: number;
467
  isDisabled?: boolean;
468
  isReadOnly?: boolean;
469
  colorScheme?: string;
470
  size?: "sm" | "md" | "lg";
471
  orientation?: "horizontal" | "vertical";
472
  thumbSize?: number;
473
  sliderTrackHeight?: number;
474
  children?: React.ReactNode;
475
}
476
```
477

478
### FormControl Component
479

480
Form control wrapper with label, helper text, and error message support.
481

482
```typescript { .api }
483
/**
484
 * Form control wrapper providing label, validation, and helper text
485
 * @param props - FormControl component props
486
 * @returns JSX element wrapping form input with metadata
487
 */
488
function FormControl(props: IFormControlProps): JSX.Element;
489

490
/**
491
 * Hook to access form control context
492
 * @returns Form control context values
493
 */
494
function useFormControlContext(): IFormControlContext;
495

496
interface IFormControlProps extends IBoxProps {
497
  isRequired?: boolean;
498
  isDisabled?: boolean;
499
  isInvalid?: boolean;
500
  isReadOnly?: boolean;
501
  children?: React.ReactNode;
502
}
503

504
interface IFormControlLabelProps extends ITextProps {
505
  children?: React.ReactNode;
506
  _text?: ITextProps;
507
  _asterick?: ITextProps;
508
}
509

510
interface IFormControlErrorMessageProps extends ITextProps {
511
  children?: React.ReactNode;
512
  _text?: ITextProps;
513
  leftIcon?: JSX.Element;
514
}
515

516
interface IFormControlHelperTextProps extends ITextProps {
517
  children?: React.ReactNode;
518
  _text?: ITextProps;
519
}
520

521
interface IFormControlContext {
522
  isRequired: boolean;
523
  isDisabled: boolean;
524
  isInvalid: boolean;
525
  isReadOnly: boolean;
526
  isFocused: boolean;
527
  onFocus: () => void;
528
  onBlur: () => void;
529
}
530
```
531

532
**Usage Example:**
533

534
```typescript
535
import { FormControl, Input, WarningOutlineIcon } from "native-base";
536

537
<FormControl isRequired isInvalid={hasError}>
538
  <FormControl.Label>Email</FormControl.Label>
539
  <Input 
540
    value={email}
541
    onChangeText={setEmail}
542
    keyboardType="email-address"
543
  />
544
  <FormControl.HelperText>
545
    We'll never share your email.
546
  </FormControl.HelperText>
547
  <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
548
    Please enter a valid email address.
549
  </FormControl.ErrorMessage>
550
</FormControl>
551
```
552

553
### Advanced Form Components
554

555
#### NumberInput Component
556

557
Numeric input with increment/decrement controls.
558

559
```typescript { .api }
560
/**
561
 * Numeric input component with stepper controls
562
 * @param props - NumberInput component props
563
 * @returns JSX element representing numeric input with controls
564
 */
565
function NumberInput(props: INumberInputProps): JSX.Element;
566

567
/**
568
 * Text field component for number input
569
 * @param props - NumberInputField component props
570
 * @returns JSX element representing the input field
571
 */
572
function NumberInputField(props: INumberInputFieldProps): JSX.Element;
573

574
/**
575
 * Container for increment/decrement steppers
576
 * @param props - NumberInputStepper component props
577
 * @returns JSX element containing stepper buttons
578
 */
579
function NumberInputStepper(props: INumberInputSteppersProps): JSX.Element;
580

581
/**
582
 * Increment stepper button
583
 * @param props - NumberInputStepper component props
584
 * @returns JSX element for increment button
585
 */
586
function NumberIncrementStepper(props: INumberInputStepperProps): JSX.Element;
587

588
/**
589
 * Decrement stepper button
590
 * @param props - NumberInputStepper component props
591
 * @returns JSX element for decrement button
592
 */
593
function NumberDecrementStepper(props: INumberInputStepperProps): JSX.Element;
594

595
interface INumberInputProps extends StyledProps {
596
  value?: number;
597
  defaultValue?: number;
598
  onChange?: (value: number) => void;
599
  min?: number;
600
  max?: number;
601
  step?: number;
602
  precision?: number;
603
  isDisabled?: boolean;
604
  isReadOnly?: boolean;
605
  isInvalid?: boolean;
606
  keepWithinRange?: boolean;
607
  clampValueOnBlur?: boolean;
608
  allowMouseWheel?: boolean;
609
  children?: React.ReactNode;
610
}
611
```
612

613
#### PinInput Component
614

615
PIN or OTP input component with multiple fields.
616

617
```typescript { .api }
618
/**
619
 * PIN input component for secure numeric entry
620
 * @param props - PinInput component props
621
 * @returns JSX element representing PIN input fields
622
 */
623
function PinInput(props: IPinInputProps): JSX.Element;
624

625
interface IPinInputProps extends StyledProps {
626
  value?: string;
627
  defaultValue?: string;
628
  onChange?: (value: string) => void;
629
  onComplete?: (value: string) => void;
630
  placeholder?: string;
631
  size?: "xs" | "sm" | "md" | "lg" | "xl";
632
  manageFocus?: boolean;
633
  autoFocus?: boolean;
634
  otp?: boolean;
635
  id?: string;
636
  type?: "alphanumeric" | "number";
637
  mask?: boolean;
638
  isDisabled?: boolean;
639
  isInvalid?: boolean;
640
  children?: React.ReactNode;
641
}
642

643
interface IPinInputFieldProps extends IInputProps {
644
  ref?: React.Ref<any>;
645
}
646
```
647

648
#### TextField Component
649

650
Enhanced text field with integrated label and validation.
651

652
```typescript { .api }
653
/**
654
 * Enhanced text field component with integrated form features
655
 * @param props - TextField component props
656
 * @returns JSX element combining input, label, and validation
657
 */
658
function TextField(props: ITextFieldProps): JSX.Element;
659

660
interface ITextFieldProps extends StyledProps {
661
  label?: string;
662
  helperText?: string;
663
  errorMessage?: string;
664
  isRequired?: boolean;
665
  isDisabled?: boolean;
666
  isInvalid?: boolean;
667
  InputProps?: IInputProps;
668
  _formControl?: IFormControlProps;
669
  _label?: IFormControlLabelProps;
670
  _helperText?: IFormControlHelperTextProps;
671
  _errorMessage?: IFormControlErrorMessageProps;
672
}
673
```