Input
A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
import { Input } from '@redshank/native';
When To Use
- A user input in a form field is needed.
- A search input is required.
Examples
Default
Default input element.
Sizes
Sizes input element.
Prefix and Suffix
Prefix and Suffix element.
Errors
With errors element.
Number
Only number element.
Text Area
Textarea element.
APIs
Input
Api props extends from TextInput
Attribute | Type | Accepted values | Description | Default |
---|---|---|---|---|
background | ThemeColor string | ThemeColor | Change background color of the input | inputColor |
borderInputColor | ThemeColor string | ThemeColor | Change border color of the input | border |
color | ThemeColor string | ThemeColor | Change text color of the input | accents2 |
error | boolean | true false | Show error variant | - |
isDisabled | boolean | true false | Editable or Disabled input | - |
onChange | function | (value: any) => void | On change function | - |
placeholder | string | Text string | Placeholder text for the Input | - |
placeholderColor | ThemeColor string | ThemeColor | Placeholder color for the Input | border |
prefix | ReactNode JSX.Element | Component | Prefix icon | - |
showIcon | boolean | true false | Hidden or Show icon, util when type is password | false and true when type="password" |
size | SizeType | small middle large | Size element customizable in ThemeProvider | middle |
suffix | ReactNode JSX.Element | Component | Suffix icon | - |
textError | string | Text | Message of the error, set with error prop in true | - |
type | InputType | Input Type | Type of the input | default |
withMarginBottom | boolean | true false | Insert margin bottom if your not use Form | false |
wrapperStyle | object | StyleProp<ViewStyle> | Style for the wrapper element | - |
Input Type
type InputType = | 'default' | 'number-pad' | 'decimal-pad' | 'numeric' | 'email-address' | 'phone-pad' | 'url' // Custom @beauty-design | 'password' // iOS Only | 'ascii-capable' | 'numbers-and-punctuation' | 'name-phone-pad' | 'twitter' | 'web-search' // Android Only | 'visible-password'
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.