Inputs

El Input Text es un campo de entrada que permite al usuario escribir texto en una sola línea, ideal para capturar información breve como nombres, correos electrónicos o números. Es versátil y se adapta a distintas necesidades de datos cortos, proporcionando una interfaz clara y fácil de usar en formularios y configuraciones.

Playground

warning_amber

El input select ya no está disponible.

Por favor, utiliza la librería Select2 para esta funcionalidad. Ver más

Label Input

inputfile

Label con tooltip

Requerido

Readonly

Prepend

Append

Disabled

Helper Text

Estado de error

Ruby

  <!-- Inputs -->
  <%= simple_form_for(User.new, url:'') do |f| %>
    <%= f.input :name,
                label: Label Input %>
  <% end %>
  
                  

Html

  <div class="form-group string">
    <label class="control-label string " for="user_name"> Label Input
    </label>
    <div class="input-group">
      <input class="form-control pl-5 pr-5" type="text" >
    </div>
  </div>

                

Groovy

<link href="<g:resource dir='css' />/components/components.css" rel="stylesheet">

  <g:inputComponent
    type="text"
    id=""
    class=""
    name=""
    value=""
    variant=""
    label="Label input"
    placeholder="Placeholder"
    
    
    
    
  />
  

                

Lista de parámetros

Ruby

Propiedad	Tipo	Detalle
wrapper_html	Array	Propiedades html para el exterior del input
input_html	Array	Propiedades html para el input
wrapper	Array	:horizontal_form Propiedades html para el exterior del input que lo hace ver inline
label	String	Label que indica el titulo del input
required	Boolean, default: false	Indica si el input es obligatorio para continuar
readonly	Boolean	Indica si el input estará en modo solo lectura
prepend	String	Indica el icono situado a la izquierda del input, usado generalmente para números y divisas
append	String	Indica el icono situado a la derecha del input
disabled	Boolean, default: false	Indica si el input estará deshabilitado para su uso
hint	String	indica el texto de ayuda en el campo de formulario

Groovy

Propiedad	Tipo	Detalle
id	String	Determina el ID dentro del DOM del componente
class	String	Determina el CLASS dentro del DOM del componente
label	String	Label que indica el titulo del input
type	text | file | email | number | password, default: text	Define el tipo de input
required	Boolean, default: false	Indica si el input es obligatorio para continuar
hint	String	indica el texto de ayuda en el campo de formulario
disabled	Boolean, default: false	Indica si el input estará deshabilitado para su uso
name	String	Indica el atributo name del input tag
value	String	Indica el atributo value del input tag
prepend	String	Indica el icono que se muestra en el input
variant	active | success | warning, opcional	Indica el estado del input, cambia el color del borde y los iconos

Input

Anatomía

Do y Don’t

Casos de excepción