es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo alinear el checkbox y la etiqueta en un formulario con React?

01 Aug, 2023 Programación

Estoy teniendo dificultades para alinear las etiquetas de este formulario junto a las casillas de verificación. Estoy utilizando React con React-Hook-Form para la validación y gestión del estado (aquí está el enlace de GitHub: https://github.com/cipdv/ciprmt-mern/blob/main/client/src/components/User/HHForm/RFHHHForm.js si eso ayuda, el archivo con el formulario se llama RFHHHForm.js).

He intentado algunas cosas:

1) Intenté usar la biblioteca de Semantic UI de esta manera:

<div classname='inline field'>
    <div classname='ui checkbox'>
        <input defaultchecked="{healthHistory?.epilepsy}" name='epilepsy' type='checkbox' id='epilepsy' {...register('epilepsy')}="">
        <label>Epilepsia</label>
    </div>
    <div classname='ui checkbox'>
        <input defaultchecked="{healthHistory?.diabetes}" name='diabetes' type='checkbox' id='diabetes' {...register('diabetes')}="">
        <label>Diabetes</label>
    </div>
</div>

Cuando usé esto, la etiqueta y las casillas de verificación se alinean, pero por alguna razón las casillas de verificación no se pueden editar (no se pueden marcar o desmarcar).

Intenté crear mi propio archivo CSS como este:

input[type="checkbox"]
{
    vertical-align:middle;
}

label, input{
    display: inline-block;
    vertical-align: middle;
}

Pero esto no pareció funcionar para alinear nada.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una solución potencial a este problema es utilizar flexbox para controlar la posición de las etiquetas y los casillas de verificación. Puede hacer esto agregando un elemento contenedor alrededor de cada par de casilla y etiqueta, y aplicando el estilo display: flex y align-items: center. Aquí tienes un ejemplo:

    <div classname='checkbox-container'>
  <input defaultchecked="{healthHistory?.epilepsy}" name='epilepsy' type='checkbox' id='epilepsy' {...register('epilepsy')}="">
  <label htmlfor='epilepsy'>Epilepsia</label>
</div>

    .checkbox-container {
  display: flex;
  align-items: center;
}

    Al envolver cada par de casilla y etiqueta en un contenedor, puedes controlar la alineación del contenido utilizando flexbox. La propiedad align-items: center centrará verticalmente la casilla y la etiqueta dentro del contenedor, lo que debería ayudar a alinearlos correctamente.

    Es posible que necesites ajustar los estilos para adaptarlos a tu diseño específico, pero esto debería darte un buen punto de partida para alinear tus etiquetas y casillas de verificación.

Comments are closed.