Saltar al contenido
Ayuda a traducir esta página

Switch

Los conmutadores alternan los estados de un solo ajuste.

Switches are the preferred way to adjust settings on mobile. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

Conmutadores Básicos

⚠️ Missing demo `pages/components/switches/Switches.js` ⚠️

Switch with FormControlLabel

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

<FormGroup>
  <FormControlLabel control={<Switch defaultChecked />} label="Label" />
  <FormControlLabel disabled control={<Switch />} label="Disabled" />
</FormGroup>

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. However, you are encouraged you to use Checkboxes instead if multiple related controls are required. 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. Puedes aprender más sobre esto en la sección Personalizando Componentes de la documentación.

Off

On

🎨 Si estás buscando inspiración, puedes mirar los ejemplos de MUI Treasury.

Tamaños

Fancy smaller switches? Use the size prop.

<Switch {...label} defaultChecked size="small" />
<Switch {...label} defaultChecked />

Ubicación de Etiqueta

Puede cambiar la ubicación de la etiqueta:

Label placement

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' }} />

API