Fields Guide

Field Types in @enlolab/forms

@enlolab/forms ships with a rich catalogue of fields—text inputs, selects, date pickers, sliders, switches and more—each exposed via a single declarative configuration. This guide gives you a bird’s-eye view of all available types and links to component-level docs for fine-grained details.

Why this matters: Knowing the field palette helps you prototype faster and pick the right control for the job.

1. Text-based inputs

Type	Component	Typical use-case
text	Text Input	Names, generic strings
email	Text Input	Email addresses (built-in pattern)
tel	Text Input	Phone numbers
textarea	Textarea	Multi-line descriptions

2. Choice controls

Type	Component	Single / Multi	Notes
select	Select	Single	Custom icons per option
radio	Input	Single	Native radio group
checkbox	—	Boolean	Simple true/false
switch	Switch	Boolean	iOS-style toggle
checkbox-group	Checkbox Group	Multi	Array of selected values
switch-group	Switch Group	Multi	Array of selected values
button-radio	Button Radio	Single	Select via button buttons
button-checkbox	Button Checkbox	Multi	Toggle buttons
button-card	Button Card	Single / Multi	Card-style selectable options

3. Date & time

Type	Component	Mode	Features
date	Date Picker	simple / popover	Optional presets, locale es by default
daterange	(coming soon)	Range	Two-calendar selection

4. Sliders & misc

Type	Component	Description
slider	Slider	Numeric value or range (array)
html	Raw HTML	Embed headers, paragraphs or custom markup
button	Arbitrary Button	Use inside fields when you need a CTA mid-form

8. Shared props recap

Every field extends BaseFieldProps which includes:

Label Props

• label - Texto de la etiqueta (puede contener HTML)
• hideLabel - Ocultar visualmente la etiqueta
• label_className - Clases CSS para la etiqueta

Layout Props

• colSpan - Número de columnas en diferentes breakpoints (default, sm, md, lg, xl, 2xl, 3xl)
• wrapper_className - Clases CSS para el wrapper del campo

Input Props

• input_className - Clases CSS para el input/control
• size - Tamaño del campo (xs, sm, md, lg, xl)
• icon - Icono React (lucide-react, iconify, etc.)
• iconProps - Props adicionales para el icono
• value - Valor inicial del campo

Validation Props

• schema - Requerido: Esquema Zod para validación
• error_className - Clases CSS para mensajes de error
• helperText - Texto de ayuda debajo del campo
• helper_className - Clases CSS para el texto de ayuda
• tooltip - Texto de ayuda contextual en tooltip

State Props

• hidden - Ocultar campo (puede ser función reactiva)
• disabled - Deshabilitar campo (puede ser función reactiva)
• readOnly - Solo lectura (puede ser función reactiva)

Refer to the Common Props reference for full details and examples.

6. Choosing the right field

1. Clarity first – Pick controls users recognise instantly (e.g., select vs radio).
2. Validation – Prefer specialised types (email) that come with patterns.
3. Mobile UX – Consider touch-friendly components (slider, date popovers).
4. Accessibility – All @enlolab/forms components are ARIA-compliant; still provide labels.

7. Extending @enlolab/forms

Can’t find the field you need? Two options:

1. Wrap an existing component using a field of type: "html" with custom React logic.
2. Contribute—open a PR adding a new field renderer inside src/factory/fieldRenderers.tsx and update this guide.

---

Related guides

• Validation Guide – Attach Zod schemas to each field.
• Layout Guide – Control grid spans and responsive behaviour.
• Buttons Guide – Navigation and call-to-action controls.