Elementos UI Forms

• Label
• Input
• Select
• Checkbox
• Textarea

Label

Elemento UI que sirven para hacer referencia a algún otro elemento UI. Cuenta con un slot y con parámetros:

• labelText: Texto del label.
• requierd-symbol: Agrega símbolo de requerido.

Ejemplos:

• Label normal:

  <x-forms::label>
      Ejemplo de label.
  </x-forms::label>

  
  

• Label inline:

  <x-forms::label class="w-full flex flex-col sm:flex-row items-center">
      <span class="mr-auto">
          Ejemplo de label...
      </span>
      <x-forms::input
          type="text"
          placeholder="Input dentro del label..."
          class="mt-1 sm:mt-0 w-full"
      />
  </x-forms::label>

  
  

• Label w/2:

  <x-forms::label class="w-full flex flex-col sm:flex-row items-center">
      <span class="w-full mr-auto">
          Ejemplo de label 2...
      </span>
      <x-forms::input
          type="text"
          placeholder="Input dentro del label 2..."
          class="mt-1 sm:mt-0 w-full"
      />
  </x-forms::label>

{info} El resto de elementos UI ya cuentan con un valor label incluido.

Input

Se emplea con la directiva x-forms::input y cuenta con las siguientes propiedades:

• label (opcional): Esta propiedad incluye un label que hace referencia al input en cuestión.
• hint (opcional): Si se cuenta con una label, se incluye una pequeña leyenda al final de dicha label.
• required-symbol (opcional): Se agrega un simbolo de requerido al label.
• Parámetros y propiedades como si fuese un input normal.

{warning} Advertencia: Padding y Marging que se aplique al componente sólo afectará al input en cuestión, no al label.

Ejemplos:

• Input text con label, required-symbol y hint.

  <x-forms::input
      type="text"
      label="Label del input tipo texto"
      hint="Requerido"
      placeholder="x-forms::input"
      required-symbol
  />

  
  

• Input date:

  <x-forms::input
      type="date"
      label="Label del input date"
      hint="Requerido"
      value="1999-07-29"
  />

  
  

• Input datetime:

  <x-forms::input
      type="datetime-local"
      label="Label del input datetime"
      hint="Requerido"
  />

  
  

Select

Utiliza la directiva x-forms::select y cuenta con las siguientes propiedades:

• label (opcional): Incluye un label al elemento.
• hint (opcional): Incluye una leyenda a la altura del label.
• default (opcional): Opción por default del select.
• default-disabled (opcional): Deshabilita la opción por default.
• options: Collection|Array de las opciones.
• selected-option (opcional): Marca la opción seleccionada.
• selected-options (opcional): Marca las opciones seleccionadas.
• disabled-options (opcional): opciones deshabilitadas.
• data-header (opcional): Sólamente cuando se use tom-select. proporciona un header al mostrar las opciones.

{warning} Advertencia: Padding y Marging que se aplique al componente solo afectará al select en cuestión.

Ejemplos:

• Select single:

  <x-forms::select
      label="Select single"
      hint="Requerido"
      :options="[
          1 => 'Uno',
          2 => 'Dos',
          3 => 'Tres',
          4 => 'Cuatro',
          5 => 'Cinco',
      ]"
  />

  
  

• Select con opción default deshabilitada:

  <x-forms::select
      label="Select"
      default="Seleccione una opcion"
      default-disabled
      :options="[
          1 => 'Uno',
          2 => 'Dos',
          3 => 'Tres',
          4 => 'Cuatro',
          5 => 'Cinco',
      ]"
  />

  
  

• Select con opciónes deshabilitadas:

  <x-forms::select
      label="Select"
      :options="[
          1 => 'Uno',
          2 => 'Dos',
          3 => 'Tres',
          4 => 'Cuatro',
          5 => 'Cinco',
      ]"
      :disabled-options="[
          1,
          3
      ]"
      selected-option="5"
  />

  
  

• Select multiple:

  <x-forms::select
      label="Select múltiple"
      hint="Opcional"
      placeholder="Seleccione varias opciones"
      :options="[
          1 => 'Uno',
          2 => 'Dos',
          3 => 'Tres',
          4 => 'Cuatro',
          5 => 'Cinco',
      ]"
      class="tom-select"
      multiple
      data-header="Números"
  />

  
  

Checkbox

Utiliza la directica x-forms:checkbox y puede cumplir con las siguientes funciones:

• Checkbox button.
• Radio button.
• Toggle button.

Propiedades:

• type: {checkbox, radio} default "checkbox"-
• label.

{warning} Advertencia: El padding y el marging que se aplique al componente solo afecta al input en cuestión.

Ejemplos:

• Toggle button:

  <x-forms:checkbox
      type="checkbox"
      id="checkbox-switch"
      label="Activo"
      checked
      switch
  />

  
  

• Checkbox buttons:

  <div class="mb-5">
      Permisos asignados:
      <div class="flex flex-col gap-2 mt-2">
          <x-forms:checkbox
              type="checkbox"
              id="checkbox-1"
              name="permiso_1"
              label="Crear usuarios"
              value="create"
          />
              <x-forms:checkbox
              type="checkbox"
              id="checkbox-2"
              name="permiso_2"
              label="Editar usuarios"
              value="create"
          />
          <x-forms:checkbox
              type="checkbox"
              id="checkbox-3"
              name="permiso_3"
              label="Consultar usuarios"
              value="create"
          />
          <x-forms:checkbox
              type="checkbox"
              id="checkbox-4"
              name="permiso"
              label="Eliminar usuarios"
              value="create"
          />
      </div>
  </div>

  
  

• Radio buttons:

  <div class="mb-5">
      Tipo de usuario:
      <div class="flex flex-row gap-6 mt-2">
          <x-forms:checkbox
              type="radio"
              id="radio-1"
              name="tipo_usuario"
              value="Administrador"
              label="admin"
          />
          <x-forms:checkbox
              type="radio"
              id="radio-2"
              name="tipo_usuario"
              value="Operativo"
              label="operativo"
          />
          <x-forms:checkbox
              type="radio"
              id="radio-3"
              name="tipo_usuario"
              value="Usuario"
              label="usuario"
          />
      </div>
  </div>

  
  

Textarea

Utiliza la directiva x-forms:textarea y cuenta con las siguientes propiedades:

• label: Opcional
• hint: Opcional
• value: Opcional

{warning} Advertencia: El padding y marging que se apliquen al componente sólamente afectará al textarea en cuestión.

Ejemplos:

• Textarea con parámetro value:

  <x-forms:textarea
      label="Textarea con parámetro value"
      hint="Requerido"
      value="Parámetro value."
  />

  
  

• Textarea con slot:

  <x-forms:textarea label="Textarea con slot">Este contenido fue dado a partir de un slot.</x-forms:textarea>