Docplanner Logo

Docplanner Mobile UI

Edit page
Introduction
⚙️ – Core
⚛️ – Atoms-Molecules
AvatarBadgeButtonCheckBoxFieldCircleDividerDownloadCardIconInputFieldInputFieldButtonPropertiesBasic usageStatesLinkListItemOneTimeCodeInputPhotoAvatarRadioGroupFieldRatingSelectFieldSimpleAvatarSpacerSwitchFieldTextToast❌ Icon (Deprecated)❌ Roboto (Deprecated)❌ WorkSans (Deprecated)
🧬 – Organisms

InputFieldButton

This is a button that looks like a regular <DpInputField />. It often comes in handy when there is a need for custom form component. For example, it is an integral part of the <Select /> component - it's used as a fake input that opens the list of options.

Properties

Apart from the props listed below it has all the props that a regular react-native <TouchableOpacity /> has.

label
string | undefined

Input button label

renderLeft
ReactNode

Content to be rendered on the left of the input field button

renderRight
ReactNode

Content to be rendered on the right of the input field button

value
string | undefined

Value

error
string | undefined

Adds an error message below and changes input button’s border and label to red

isFocused
boolean | undefined

Triggers label position and color animation

Basic usage

States