Компонент Switch

Значение isChecked задает состояние компонента, onChange отвечает за изменение состояния.

const [isChecked, setChecked] = React.useState(false);

<Switch isChecked={isChecked} onChange={setChecked}>
  Переключатель
</Switch>

Отображение

Компонент во всех возможных визуальных состояниях.

const rowStyles = {
  width: '100%',
};

const cellStyles = {
  flex: '1 0 50%', 
};

<div className="w400">
  <div className="md-flex-row" style={rowStyles}>
    <div style={cellStyles}>
      <Switch>
        Default
      </Switch>
    </div>
    <div style={cellStyles}>
      <Switch isChecked>
        Active    
      </Switch>
    </div>
  </div>
    <div className="md-flex-row" style={rowStyles}>
    <div style={cellStyles}>
      <Switch disabled>
        Default - Disabled
      </Switch>
    </div>
    <div style={cellStyles}>
      <Switch isChecked disabled>
        Active - Disabled
      </Switch>
    </div>
  </div>
</div>

Подсказка (ЕИСЖС)

При передаче hint будет отображена подсказка.

const rowStyles = {
  width: '100%',
};

const cellStyles = {
  flex: '1 0 50%',
};

const hint = 'Подсказка';

<div className="w400">
  <div className="md-flex-row" style={rowStyles}>
    <div style={cellStyles}>
      <Switch hint={hint}>
        Default
      </Switch>
    </div>
    <div style={cellStyles}>
      <Switch isChecked hint={hint}>
        Active
      </Switch>
    </div>
  </div>
  <div className="md-flex-row" style={rowStyles}>
    <div style={cellStyles}>
      <Switch disabled hint={hint}>
        Default - Disabled
      </Switch>
    </div>
    <div style={cellStyles}>
      <Switch isChecked disabled hint={hint}>
        Active - Disabled
      </Switch>
    </div>
  </div>
</div>

Отображение подсказки при описании в несколько строк.

  <Switch
    hint="Подсказка"
    styles={`max-width: 350px;`}
  >   
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Feugiat placerat viverra sed dolor sem ut felis.
  </Switch>

Ошибка (ЕИСЖС)

При передаче error будет отображена ошибка.

const rowStyles = {
  width: '100%',
  marginBottom: 40
};

const cellStyles = {
  flex: '1 0 50%',
};

const hint = 'Подсказка';
const error = 'Ошибка';

<div className="w400">
  <div className="md-flex-row" style={rowStyles}>
    <div style={cellStyles}>
      <Switch hint={hint} error={error}>
        Default
      </Switch>
    </div>
    <div style={cellStyles}>
      <Switch isChecked hint={hint} error={error}>
        Active
      </Switch>
    </div>
  </div>
</div>