Skip to content
S42UI - Server Driven UI for React Native

textinput

El componente textinput es una herramienta fundamental en las interfaces de usuario que requieren la entrada de datos por parte del usuario. Es altamente personalizable, permitiendo definir su apariencia, comportamiento, y la forma en que los datos son capturados. Este componente es esencial para formularios, autenticación, búsqueda, y cualquier otra interacción que requiera que el usuario ingrese texto.

Props

value

Es el valor por defecto que tendrá el campo de texto.

<textinput value="simon@mail.com" />

target

Indica en que component del tipo state almacenaremos el valor del textinput

<screen>
  <meta>
    <header>TextInput Example</header>
  </meta>
  <body>
    <box>
      <textinput target="firstName"/>
      <text>Hola {{firstName}}</text>
    </box>
  </body>
  <state name="firstName" />
<screen>

placeholder

Es el texto que se mostrará en un tono mas claro dentro del campo de texto hasta que el usuario inserte algún valor.

<textinput placeholder="Inserte su e-mail" />

placeholderTextColor

Indicamos el color que deberá tener el placeholder.

<textinput placeholderTextColor="#dced33" />

textAlign

Indicamos como se debe alienar el contenido.

enum(‘left’, ‘center’, ‘right’)

<textinput textAlign="right" />

secureTextEntry

Indica si el texto debe mostrarte de forma segura (ideal para passwords)

<textinput secureTextEntry="true" />

inputMode

Indicamos el tipo de entrada de datos que esperamos del usuario. enum(‘decimal’, ‘email’, ‘none’, ‘numeric’, ‘search’, ‘tel’, ‘text’, ‘url’)

<textinput>

multiline

Indicamos si el textinput soporta múltiples líneas.

<textinput multiline="true" />

keyboardType

Indica el tipo de teclado que debe mostrarse al usuario.

enum(‘default’, ‘number-pad’, ‘decimal-pad’, ‘numeric’, ‘email-address’, ‘phone-pad’, ‘url’)

<textinput keyboardType="number-pad" />

caretHidden

Indicar si mostramos o no el cursor titilante. Por default se mostrará.

<input caretHidden="false" />

maxLength

Indicamos el máximo de carácteres que soportaremos en nuestro textinput.

<textinput maxLength="20" />

style

Indica los estilos que podemos pasarle al componente textinput. Las propiedades disponibles son:

  • color: indicar el color del texto. Formato hexadecimal.
  • fontFamily: indicar la familia de fuente a utilizar.
  • fontSize: indica el tamaño de la fuente. Es un valor entero.
  • fontStyle: enum(‘normal’, ‘italic’)
  • fontWeight: enum(‘normal’, ‘bold’, ‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, ‘800’, ‘900’). Indica “peso” del texto (el ancho de como se mostrará)
  • lineHeight: indica el alto de la línea del texto. Valor numérico entre comillas simples.
  • textAlign: enum(‘auto’, ‘left’, ‘right’, ‘center’, ‘justify’)
  • textAlignVertical (android): enum(‘auto’, ‘top’, ‘bottom’, ‘center’)
  • textShadowColor: Indica el color de la sombra del texto.
  • textTransform: enum(‘none’, ‘uppercase’, ‘lowercase’, ‘capitalize’). Default none
  • userSelect: enum(‘auto’, ‘text’, ‘none’, ‘contain’, ‘all’). Default none

Example

<screen>
  <meta>
    <header>TextInput Example</header>
  </meta>
  <body>
    <box>
      <textinput value="" placeholder="Inserte su e-mail" keyboardType="email" style="borderWidth: '1'; borderColor='#000'" />
    </box>
  </body>
</screen>