Text Input

El componente de input de texto se utiliza para recopilar entradas de texto de una sola línea de los usuarios.

Properties

Además de las propiedades comunes, el componente de input de texto acepta las siguientes propiedades específicas:

Basic Properties

Property	Type	Required	Default	Description
`type`	`"text" \| "email" \| "tel"`	Yes	-	Especifica el tipo de input. `email` y `tel` tienen validación básica integrada
`placeholder`	`string`	No	-	Texto de placeholder que se muestra cuando el input está vacío
`schema`	`z.ZodType`	Yes	-	Esquema Zod para validación. Requerido para todos los campos

Propiedades Adicionales Disponibles

Además de las propiedades básicas, los inputs de texto soportan todas las propiedades comunes, incluyendo:

value - Valor inicial (string)
size - Tamaño del input (xs, sm, md, lg, xl)
icon - Icono React (lucide-react, iconify, etc.)
iconProps - Props adicionales para el icono
helperText - Texto de ayuda
tooltip - Texto de ayuda contextual
hidden, disabled, readOnly - Estado del campo (pueden ser funciones reactivas)
colSpan - Layout responsive

Examples

Basic Text Input

A simple text input with validation

import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const BasicTextInput = createExampleForm({
  formId: "basic-text-input",
  fields: {
    name: {
      type: "text",
      label: "Name",
      placeholder: "Enter your name",
      helperText: "Please enter your full name",
      schema: z.string().min(2, "Name must be at least 2 characters"),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["name"],
    },
  },
});

Input Sizes

Inputs de diferentes tamaños con y sin iconos

import { Icon } from "@iconify/react";
import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const SizeInputsExample = createExampleForm({
  formId: "size-inputs-example",
  fields: {
    xs: {
      type: "text",
      label: "Input XS",
      size: "xs",
      placeholder: "Tamaño XS",
      schema: z.string().min(1, "Este campo es requerido"),
    },
    xsWithIcon: {
      type: "text",
      label: "Input XS con Icono",
      size: "xs",
      placeholder: "Tamaño XS con icono",
      icon: <Icon icon="mdi:user" />,
      value: "Texto de ejemplo XS",
      schema: z.string().min(1, "Este campo es requerido"),
    },
    sm: {
      type: "text",
      label: "Input SM",
      size: "sm",
      placeholder: "Tamaño SM",
      schema: z.string().min(1, "Este campo es requerido"),
    },
    smWithIcon: {
      type: "text",
      label: "Input SM con Icono",
      size: "sm",
      placeholder: "Tamaño SM con icono",
      icon: <Icon icon="mdi:user" />,
      value: "Texto de ejemplo SM",
      schema: z.string().min(1, "Este campo es requerido"),
    },
    md: {
      type: "text",
      label: "Input MD",
      size: "md",
      placeholder: "Tamaño MD",
      schema: z.string().min(1, "Este campo es requerido"),
    },
    mdWithIcon: {
      type: "text",
      label: "Input MD con Icono",
      size: "md",
      placeholder: "Tamaño MD con icono",
      icon: <Icon icon="mdi:user" />,
      value: "Texto de ejemplo MD",
      schema: z.string().min(1, "Este campo es requerido"),
    },
    lg: {
      type: "text",
      label: "Input LG",
      size: "lg",
      placeholder: "Tamaño LG",
      schema: z.string().min(1, "Este campo es requerido"),
    },
    lgWithIcon: {
      type: "text",
      label: "Input LG con Icono",
      size: "lg",
      placeholder: "Tamaño LG con icono",
      icon: <Icon icon="mdi:user" />,
      value: "Texto de ejemplo LG",
      schema: z.string().min(1, "Este campo es requerido"),
    },
    xl: {
      type: "text",
      label: "Input XL",
      size: "xl",
      placeholder: "Tamaño XL",
      schema: z.string().min(1, "Este campo es requerido"),
    },
    xlWithIcon: {
      type: "text",
      label: "Input XL con Icono",
      size: "xl",
      placeholder: "Tamaño XL con icono",
      icon: <Icon icon="mdi:user" />,
      iconProps: {
        className: "bg-blue-500",
      },
      value: "Texto de ejemplo XL",
      schema: z.string().min(1, "Este campo es requerido"),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: [
        "xs",
        "xsWithIcon",
        "sm",
        "smWithIcon",
        "md",
        "mdWithIcon",
        "lg",
        "lgWithIcon",
        "xl",
        "xlWithIcon",
      ],
    },
  },
});

Input with Icon

A text input with an icon

import { UserIcon } from "lucide-react";
import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const IconTextInput = createExampleForm({
  formId: "icon-text-input",
  fields: {
    username: {
      type: "text",
      label: "Username",
      icon: <UserIcon />,
      placeholder: "Enter your username",
      schema: z.string().min(3, "Username must be at least 3 characters"),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["username"],
    },
  },
});

Custom Styled Input

A text input with custom styling

import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const StyledTextInput = createExampleForm({
  formId: "styled-text-input",
  fields: {
    customInput: {
      type: "text",
      label: "Custom Input",
      input_className: "border-2 border-blue-500 focus:border-blue-700",
      wrapper_className: "bg-gray-50 p-4 rounded-lg",
      placeholder: "This input has custom styling",
      schema: z.string(),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["customInput"],
    },
  },
});

Responsive Input

A text input that spans multiple columns at different breakpoints

import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const ResponsiveTextInput = createExampleForm({
  formId: "responsive-text-input",
  fields: {
    fullWidthInput: {
      type: "text",
      label: "Full Width Input",
      colSpan: {
        default: 1,
        sm: 2,
        md: 3,
        lg: 4,
      },
      placeholder: "This input spans multiple columns",
      schema: z.string(),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["fullWidthInput"],
    },
  },
});

Multiple Inputs Example

A form with multiple inputs of different types

import {
  LockIcon,
  MailIcon,
  MapPinIcon,
  PhoneIcon,
  UserIcon,
} from "lucide-react";
import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const MultipleInputsExample = createExampleForm({
  formId: "multiple-inputs",
  fields: {
    name: {
      type: "text",
      label: "Full Name",
      icon: <UserIcon />,
      placeholder: "Enter your full name",
      colSpan: { default: 2 },
      schema: z.string().min(2, "Name must be at least 2 characters"),
    },
    email: {
      type: "email",
      label: "Email Address",
      icon: <MailIcon />,
      placeholder: "Enter your email",
      colSpan: { default: 2 },
      schema: z.string().email("Invalid email address"),
    },
    password: {
      type: "text",
      label: "Password",
      icon: <LockIcon />,
      placeholder: "Enter your password",
      colSpan: { default: 2 },
      schema: z.string().min(8, "Password must be at least 8 characters"),
    },
    phone: {
      type: "tel",
      label: "Phone Number",
      icon: <PhoneIcon />,
      placeholder: "Enter your phone number",
      colSpan: { default: 1 },
      schema: z.string().min(10, "Phone number must be at least 10 digits"),
    },
    address: {
      type: "text",
      label: "Address",
      icon: <MapPinIcon />,
      placeholder: "Enter your address",
      colSpan: { default: 1 },
      schema: z.string().min(5, "Address must be at least 5 characters"),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["name", "email", "password", "phone", "address"],
    },
  },
  layout: {
    columns: { default: 2 },
    gap: { default: 4 },
  },
});

Conditional Input Example

A form with a conditionally visible input

import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const ConditionalInputExample = createExampleForm({
  formId: "conditional-input",
  fields: {
    showField: {
      type: "checkbox",
      label: "Show Additional Field",
      colSpan: { default: 1 },
      schema: z.boolean(),
      input_className: "cursor-pointer hover:border-primary",
      wrapper_className: "hover:opacity-80 transition-opacity",
    },
    conditionalField: {
      type: "text",
      label: "Conditional Field",
      placeholder: "This field is conditionally shown",
      hidden: (values) => !values.showField,
      colSpan: { default: 1 },
      schema: z.string(),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["showField", "conditionalField"],
    },
  },
  layout: {
    columns: { default: 1 },
    gap: { default: 4 },
  },
});

Best Practices

Always provide a label: Even if you hide it visually, include a label for accessibility
Use helper text: Provide additional context or instructions when needed
Implement validation: Use Zod schemas to validate input
Consider responsive design: Use colSpan to control layout at different breakpoints
Add icons thoughtfully: Use icons to enhance understanding but don’t rely on them alone

Accessibility

The input is automatically associated with its label
Error messages are properly announced to screen readers
The component follows ARIA best practices
Keyboard navigation is fully supported