Default Image

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

AttributeTypeAccepted valuesDescriptionDefault
backgroundThemeColor stringThemeColorChange background color of the inputinputColor
borderInputColorThemeColor stringThemeColorChange border color of the inputborder
colorThemeColor stringThemeColorChange text color of the inputaccents2
errorbooleantrue falseShow error variant-
isDisabledbooleantrue falseEditable or Disabled input-
onChangefunction(value: any) => voidOn change function-
placeholderstringText stringPlaceholder text for the Input-
placeholderColorThemeColor stringThemeColorPlaceholder color for the Inputborder
prefixReactNode JSX.ElementComponentPrefix icon-
showIconbooleantrue falseHidden or Show icon, util when type is passwordfalse and true when type="password"
sizeSizeTypesmall middle largeSize element customizable in ThemeProvidermiddle
suffixReactNode JSX.ElementComponentSuffix icon-
textErrorstringTextMessage of the error, set with error prop in true-
typeInputTypeInput TypeType of the inputdefault
withMarginBottombooleantrue falseInsert margin bottom if your not use Formfalse
wrapperStyleobjectStyleProp<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!

DiscordGithub

Contributing:

PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.

Copyright © 2023 @redshank.