Switch

By default, the switch thumb sits to the left side of the track and is in an unchecked state.

• You can set the switch state using the optional defaultChecked prop.
• You can use the onChange event to read the value using the second parameter.

• Only use the checked prop for a controlled switch that requires some logic for validating value.
• We recommend that you always use a text description for a switch.

When defaultChecked={true}, switch is in a checked state, and the switch thumb sits to the right side of the track.

You can set a switch to a disabled state. When disabled, it's not interactive or focusable.

Use a disabled state for switches that have permissions, dependencies or prerequisites. For example, you can disable a switch in a form because the user hasn't yet completed an earlier section of the form.

You can set a checked switch to a disabled state. When disabled, it's not interactive or focusable. This shows an option has been “checked” but the user cannot change it.

Use a disabled checked state for switches that have permissions, dependencies or pre-requisites. For example, a switch in a form may be in a checked state but disabled as the user doesn't have permissions to edit their selection during a later stage in a form.

Use a form field if you need a left aligned label, avoid also having a switch label.

By default, the switch thumb sits to the left side of the track and is in an unchecked state.

• You can set the switch state using the optional defaultChecked prop.
• You can use the onChange event to read the value using the second parameter.

• Only use the checked prop for a controlled switch that requires some logic for validating value.
• We recommend that you always use a text description for a switch.

When defaultChecked={true}, switch is in a checked state, and the switch thumb sits to the right side of the track.

You can set a switch to a disabled state. When disabled, it's not interactive or focusable.

Use a disabled state for switches that have permissions, dependencies or prerequisites. For example, you can disable a switch in a form because the user hasn't yet completed an earlier section of the form.

You can set a checked switch to a disabled state. When disabled, it's not interactive or focusable. This shows an option has been “checked” but the user cannot change it.

Use a disabled checked state for switches that have permissions, dependencies or pre-requisites. For example, a switch in a form may be in a checked state but disabled as the user doesn't have permissions to edit their selection during a later stage in a form.

Use a form field if you need a left aligned label, avoid also having a switch label.

By default, the switch thumb sits to the left side of the track and is in an unchecked state.

• You can set the switch state using the optional defaultChecked prop.
• You can use the onChange event to read the value using the second parameter.

• Only use the checked prop for a controlled switch that requires some logic for validating value.
• We recommend that you always use a text description for a switch.

When defaultChecked={true}, switch is in a checked state, and the switch thumb sits to the right side of the track.

You can set a switch to a disabled state. When disabled, it's not interactive or focusable.

Use a disabled state for switches that have permissions, dependencies or prerequisites. For example, you can disable a switch in a form because the user hasn't yet completed an earlier section of the form.

You can set a checked switch to a disabled state. When disabled, it's not interactive or focusable. This shows an option has been “checked” but the user cannot change it.

Use a disabled checked state for switches that have permissions, dependencies or pre-requisites. For example, a switch in a form may be in a checked state but disabled as the user doesn't have permissions to edit their selection during a later stage in a form.

Use a form field if you need a left aligned label, avoid also having a switch label.