TextField

Campo de texto — estilado desde color.field.* de design-tokens, el mismo set que comparten OrbitTextarea y OrbitSelect (son una sola familia visual, no grupos de color por componente como las variantes de botón). El foco es siempre un borde lima sólido de 2px (field.border-focus), nunca un glow.

Uso

Web

<orbit-text-field
  label="Nombre del proyecto"
  placeholder="nombre-del-proyecto"
  helper-text="Se usa como nombre del archivo Kotlin."
></orbit-text-field>

Compose Multiplatform

var value by remember { mutableStateOf("") }
OrbitTextField(
    value = value,
    onValueChange = { value = it },
    label = "Nombre del proyecto",
    placeholder = "nombre-del-proyecto",
    helperText = "Se usa como nombre del archivo Kotlin.",
)

Tamaños

Comparte la misma escala control.height.* que OrbitButton — un botón, un campo y una fila de nav siempre alinean en una toolbar.

Web

<orbit-text-field size="xs" placeholder="xs"></orbit-text-field>
<!-- xs | sm | md | lg | xl -->

Compose Multiplatform

OrbitTextField(
    value = value,
    onValueChange = { value = it },
    size = OrbitFieldSize.Xs,
)
// Xs | Sm | Md | Lg | Xl

Íconos

leading-icon/trailing-icon aceptan un nombre del catálogo cerrado de Orbit, igual que en OrbitButton.

Web

<orbit-text-field
  placeholder="Buscar..."
  leading-icon="sparkles"
></orbit-text-field>

Compose Multiplatform

OrbitTextField(
    value = value,
    onValueChange = { value = it },
    leadingIcon = OrbitIcon.Sparkles,
)

Estados

Web

<orbit-text-field placeholder="Enabled"></orbit-text-field>
<orbit-text-field placeholder="Disabled" disabled></orbit-text-field>
<orbit-text-field
  value="mal-formado"
  error-text="Ese nombre ya existe."
></orbit-text-field>

Compose Multiplatform

OrbitTextField(value = "", onValueChange = {})
OrbitTextField(value = "", onValueChange = {}, enabled = false)
OrbitTextField(
    value = "mal-formado",
    onValueChange = {},
    errorText = "Ese nombre ya existe.",
)

disabled usa el par sólido mudo (text.disabled) — nunca opacity. Cuando hay errorText/error-text, reemplaza al helperText y pinta el borde con field.border-error.

Validación con pattern

Escribí algo que no sea un número — se pinta de error solo, sin que nadie bloquee tu tecla. Borralo o escribí un número y el error desaparece.

Web

<orbit-text-field
  label="Solo números"
  placeholder="Escribí algo..."
  pattern="[0-9]+"
  pattern-error-text="Solo se permiten números."
></orbit-text-field>

Compose Multiplatform

var value by remember { mutableStateOf("") }
OrbitTextField(
    value = value,
    onValueChange = { value = it },
    label = "Solo números",
    placeholder = "Escribí algo...",
    pattern = Regex("[0-9]+"),
    patternErrorText = "Solo se permiten números.",
)

Si pasás errorText/error-text a la vez que pattern, gana errorText — pensado para cuando el error viene de otro lado (ej. una validación async del servidor) y no del regex.

Props

Prop	Tipo	Default	Descripción
value	string	—	Valor actual.
onValueChange / evento input	(string) => void	—	Se dispara en cada cambio.
placeholder	string?	null	Texto de placeholder.
label	string?	null	Label sobre el campo.
helperText / attr helper-text	string?	null	Texto de ayuda bajo el campo.
errorText / attr error-text	string?	null	Si está presente, activa el estado de error y reemplaza al helper text. Siempre gana sobre la validación por pattern.
pattern / attr pattern	Regex? (Kotlin) / string regex (web)	null	Valida el valor, no bloquea el tipeo — si no matchea, muestra patternErrorText como si fuera errorText.
patternErrorText / attr pattern-error-text	string?	null	Mensaje de error a mostrar cuando el valor no matchea pattern.
enabled / attr disabled	boolean	true	Habilita/deshabilita el campo.
size	OrbitFieldSize (Kotlin) / "xs" | "sm" | "md" | "lg" | "xl" (web)	Md / "md"	Tamaño — misma escala que OrbitButton.
leadingIcon / attr leading-icon	OrbitIcon? / catálogo cerrado	null	Ícono antes del texto.
trailingIcon / attr trailing-icon	OrbitIcon? / catálogo cerrado	null	Ícono después del texto.