Switch

A skin on a checkbox.

Import Syntax

xxxxxxxxxx
 
import Switch from 'calcite-react/Switch'

Basic Usage

Inline example

 
<Switch>Inline example</Switch>

Alternate Styles

Confirm account deletion. You cannot recover deleted accounts.destructive

Enable Two-Factor AuthenticationlabelPosition='before'

 
<GuideExample label="destructive">
  <Switch destructive>
    Confirm account deletion. You cannot recover deleted accounts.
  </Switch>
</GuideExample>
<GuideExample label="labelPosition='before'">
  <Switch labelPosition="before">Enable Two-Factor Authentication</Switch>
</GuideExample>

fullWidth

Enable Two-Factor Authentication

 
<GuideExample>
  <Switch fullWidth>Enable Two-Factor Authentication</Switch>
</GuideExample>
<GuideExample>
  <Switch fullWidth labelPosition="before">
    Enable Two-Factor Authentication
  </Switch>
</GuideExample>

with Formik

Enable Multi-Factor Authentication

{
  "mfa": false
}

 
() => {
  const options = {
    mfa: false,
  }
  const onSubmit = (values, actions) => {
    setTimeout(() => {
      console.log(values)
      actions.setSubmitting(false)
    }, 1000)
  }
​
  const onValidate = values => {
    const errors = {}
​
    if (!values.mfa) {
      errors.mfa = 'You must enable MFA'
    }
​
    return errors
  }
​
  return (
    <Formik initialValues={options} validate={onValidate} onSubmit={onSubmit}>
      {({ values, errors, touched, handleSubmit, isSubmitting }) => (
        <GuideExample>
          <Form onSubmit={handleSubmit}>
            {/* mfa */}
​
            <FormControl
              success={touched.mfa && !errors.mfa ? true : false}
              error={touched.mfa && errors.mfa ? true : false}
            >
              <Field component={Switch} name="mfa" value="mfa">
                Enable Multi-Factor Authentication
              </Field>
              <FormHelperText>
                {(touched.mfa && errors.mfa) || null}
              </FormHelperText>
            </FormControl>
​
            <FormControl>
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting ? 'Submitting.......' : 'Submit'}
              </Button>
            </FormControl>
            <pre>{JSON.stringify(values, null, 2)}</pre>
          </Form>
        </GuideExample>
      )}
    </Formik>
  )
}

Props

Property	Type	Required	Default	Description
labelPosition	Enum	false	after	Position of the label text in relation to the input.
children	Node	false	-	The text label of the Switch.
name	String	false	-	The name to be shared among Switches in a group.
checked	Bool	false	-	Whether the Switch is currently checked.
onChange	Func	false	-	Event called when the Switch value should be toggled.
destructive	Bool	false	-	Should use a red highlight color.
fullWidth	Bool	false	-	Switch and label will take up the full width of the container