OrbitTextField

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.

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.
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.