# Input Pressable

InputPressable is a component that is used to trigger an action when pressed.

## Design & usage guidelines

This component matches InputText in terms of visual design, but functionality is
tied to a press action instead of an input. As a result, this component can
launch a native modal or external library such as the DateTimePicker, instead of
acting as an input that triggers a keyboard when tapped.

### States

A
[disabled](/storybook/mobile/?path=/story/components-forms-and-inputs-inputpressable--disabled)
InputPressable cannot be pressed and is visually muted to indicate that it is
disabled.

An
[invalid](/storybook/mobile/?path=/story/components-forms-and-inputs-inputpressable--invalid)
state is indicated by a red input line and an error message. The error message
is displayed below the input.

To make an InputPressable
[clearable](/storybook/mobile/?path=/story/components-forms-and-inputs-inputpressable--clearable)
you need to pass the `clearable` prop set as `always`. The reason for this is
that InputPressable isn't an input that is focused in the same way an InputText
would be. When you want to have an input be clearable you will also need to
provide an `onClear` that will clear the input's value.


## Controlled & Uncontrolled

InputPressable can only be used as a controlled component. Given the nature of
this input component which requires a wrapper to set the value, it doesn't make
sense for this component to be uncontrolled.

## Developer notes

To prevent a previously focused input from being focused again when the
`InputPressable` is closed you can `Keyboard.dismiss()` in the `onPress`.


## Props

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `accessibilityHint` | `string` | No | — | Helps users understand what will happen when they perform an action |
| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the element |
| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  Since the input value isn't editable (i.e. `InputDateTime`) y... |
| `disabled` | `boolean` | No | — | Disables input selection |
| `error` | `FieldError` | No | — | Indicates if there is an validation error |
| `focused` | `boolean` | No | — | Indicates if the input is focused |
| `invalid` | `boolean | string` | No | — | Indicates the current selection is invalid |
| `onClear` | `() => void` | No | — | Callback called when the user clicks the ClearAction button. Should clear the value passed. To disallow clearing set ... |
| `onPress` | `() => void` | No | — | Callback that is called when the text input is focused @param event |
| `placeholder` | `string` | No | — | Placeholder item shown until a selection is made |
| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
| `ref` | `Ref<Text>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
| `suffix` | `{ icon: IconNames; label?: string; onPress: () => void; } | { onPress?: never; icon?: IconNames; label?: string; }` | No | — | Symbol to display after the text input |
| `value` | `string` | No | — | Current value of the component |