Популярная библиотека React UI Material-UI предлагает множество готовых компонентов для создания пользовательских интерфейсов. Одним из этих компонентов является Сheckbox, позволяющий пользователям выбирать один или несколько параметров из списка. Он часто используется в формах или других полях ввода, где пользователь должен выбрать несколько элементов из списка.

Компонент Checkbox оформлен в соответствии с принципами Material Design Google. Эти принципы проектирования были разработаны для того, чтобы все продукты, предлагаемые пользователям, были единообразными и удобными для пользователя.

Перейдем к установки через npm или yarn:

	
npm install @material-ui/core
yarn add @material-ui/core

После установки библиотеки вы можете использовать компонент Checkbox из пакета @material-ui/core в своем приложении, импортировав его.

	
import React from 'react';
import { Checkbox } from '@material-ui/core';
 
function App() {
  return (
    
  );
}
export default App

В этом примере создается простой чекбокс с основным цветом, который отмечен по умолчанию. Предоставляя компоненту Checkbox дополнительные свойства, вы можете изменить внешний вид.

Так же можно добавить описание чекбокса разметив текст в нужном месте.

	
import React from "react";
import { Checkbox } from "@material-ui/core";
import { FormControlLabel } from "@material-ui/core";
 
const MuiCheckbox = () => {
  return (
    

       } label="Option 1" />
 
    
  );
};
 
export default MuiCheckbox;

Однако важно отметить, что вы можете использовать компонент FormGroup библиотеки Material-UI и передать компонент FormControlLabel как дочерний. Рассмотрим следующий пример:

	
import React from "react";
import { Checkbox } from "@material-ui/core";
import { FormControlLabel } from "@material-ui/core";
import { FormGroup } from "@material-ui/core";
 
const MuiCheckbox = () => {
  return (
    

        
            }
                label="Secondary"
            />
        
 
    
  );
};
export default MuiCheckbox;

Кроме того, свойство labelPlacement используется для настройки местоположения метки. Это может быть начало или конец.

	
}
  label="Secondary"
  labelPlacement="end"
/>

Как настроить цвета чекбокса пользовательского интерфейса

Цвет — важная часть веб-дизайна, которая может помочь в создании приятного и эффективного пользовательского опыта, создании сильной идентичности бренда и направлении внимания пользователя на странице.

Чтобы указать уникальный цвет, вы можете использовать шестнадцатеричный код цвета или имя цвета CSS.

	
import React from 'react';
import { Checkbox } from '@material-ui/core';
 
function App() {
  return (
  }
     color="secondary"
   />
  );
}
export default App

Вы можете изменить стили чекбоксов по умолчанию, используя объект пользовательских стилей makeStyles, его можно использовать для разработки специального объекта стилей для вашего чекбокса.

	
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Checkbox from '@material-ui/core/Checkbox';
 
const useStyles = makeStyles({  // This is a function that returns an object.
    root: {
        color: 'green',
        '&$checked': {
            color: 'green',
        },
    },
    checked: {},
});
 
const MuiCheckbox = () => {
    const classes = useStyles();
 
    return (
        
    );
};
 
export default MuiCheckbox;

Результат выполнения: