Saltar al contenido

馃帀 Material UI v5 is out! Head to the migration guide to get started.

Switch

Los conmutadores alternan los estados de un solo ajuste.

Estos son la manera mas com煤n de ajustar una configuraci贸n en dispositivos m贸viles. La opcion controllada por el switch asi como el estado internmo de este, deben especificarse de manera clara en la etiqueta inline correspondiente.

Conmutadores B谩sicos

Switch with FormControlLabel

Switch can be provided with a description thanks to the FormControlLabel component.

Switches with FormGroup

FormGroup es un contenedor muy 煤til usado para agrupar componentes de controles de selecci贸n que proporciona una API m谩s sencilla. FormGroup es un contenedor muy 煤til usado para agrupar componentes de controles de selecci贸n que proporciona una API m谩s sencilla. However, you are encouraged you to use Checkboxes instead if multiple related controls are required.

Assign responsibility

Be careful

Customized switches

Here are some examples of customizing the component. Here are some examples of customizing the component.

馃帹 Si est谩s buscando inspiraci贸n, puedes mirar los ejemplos de MUI Treasury.

Tama帽os

Fancy smaller switches? Usa la propiedad size.

<FormGroup>
  <FormControlLabel
    control={<Switch size="small" checked={checked} onChange={toggleChecked} />}
    label="Small"
  />
  <FormControlLabel
    control={<Switch checked={checked} onChange={toggleChecked} />}
    label="Normal"
  />
</FormGroup>

Ubicaci贸n de Etiqueta

Puede cambiar la ubicaci贸n de la etiqueta:

Cu谩ndo usarlo

Accesibilidad

  • It will render an element with the checkbox role not switch role since this role isn't widely supported yet. Please test first if assistive technology of your target audience supports this role properly. Then you can change the role with <Switch inputProps={{ role: 'switch' }}>
  • Todos los controles de formulario deben tener etiquetas, y esto incluye radio buttons, checkboxes, and switches. En la mayor铆a de los casos, esto se hace usando el elemento <label> (FormControlLabel).
  • Cuando no se puede usar una etiqueta, es necesario agregar un atributo directamente al componente de entrada. En este caso, puede aplicar el atributo adicional (por ejemplo, aria-label, aria-labelledby, title) a trav茅s de la propiedad inputProps.
<Switch value="checkedA" inputProps={{ 'aria-label': 'Switch A' }} />