Toggle (Switch)

The <FormToggle> component provides a convenient way for a user to make a UI binary decision, similar to a Checkbox, however, the UI presentation and interaction resembles that of a typical iOS UI selection.

A Toggle's common usage is within a Form, however, it can be used stand-alone if desired. For ease, the toggle switch component is attached to and accessible through the Form component (e.g. <Form.Switch // implementation />).

Pro tip: this very site (https://bristlecone.design) uses the Toggle component to allow you to

easily switch between
the theme from default-to-dark.

Default example

The default switch presentation and behavior is simple and, when toggled on, inherits the dark form style from the default theme. In most cases, it'll be more effective with a corresponding label prop defined.

<Form.Switch />

With a label prop

<Form.Switch label="Hey ma', I'm a toggle switch!" />

Toggled on by default

By passing the toggled prop, your form switch will be on by default.

<Form.Switch label="Hey pa', I'm toggled on by default!" toggled />

Full-width (horizontal)

Need a toggle switch to spand the entire horizontal space around it? No problemo, pass it the block prop.

<Form.Switch label="Hey pa', I'm full-width by default!" block />

Stacked (vertical)

Layout your toggle switch so its respective label text and the toggle switch itself are vertically stacked using the stacked prop.

<Form.Switch label="Hey pa', I'm stacked on by default!" stacked />

Stacked and Full-width

If there's an itch for it, you can combine the stacked and block props to get a vertically, full-width switch.

<Form.Switch label="Hey pa', I'm stacked, full-width and on by default!" toggled block stacked />

Square and Round Flavors

Using the square and round props, you can change the default toggle switch's look-n-feel accordingly.

<Form.Switch label="Hey pa', I'm a round toggle switch!" round />
<Form.Switch label="Hey pa', I'm a square toggle switch!" square />

Color schemes

Like with Buttons and other Bristlecone components, the toggle switch component's color presentation can be changed with the scheme prop.

<Form.Switch label="Hey pa', I'm blue, round, stacked, full-width and toggled on!" scheme='blue' round toggled block stacked />
<Form.Switch label="Hey pa', I'm gray, round, stacked, full-width and toggled on!" scheme='gray' round toggled block stacked />
<Form.Switch label="Hey pa', I'm orange, round, stacked, full-width and toggled on!" scheme='orange' round toggled block stacked />
<Form.Switch label="Hey pa', I'm purple, round, stacked, full-width and toggled on!" scheme='purple' round toggled block stacked />
<Form.Switch label="Hey pa', I'm red, round, stacked, full-width and toggled on!" scheme='red' round toggled block stacked />

Disabled

A toggle switch can be disabled in either state: on (toggled) or off.

<Form.Switch label="Look pa', I'm disabled!" disabled />
<Form.Switch label="Look pa', I'm disabled too!" scheme='purple' toggled disabled />

With Form and related components

As noted above, a toggle switch is anticipated to be used with a Form component and related sibling components although it's not necessarily required. Here is a basic example of the toggle switch with some relatives, if you will.

Basic form with grouped elements and a caption
<Form id="foo" name="bar">
    <Form.Fieldset caption='Basic form with grouped elements and a caption'>
        <Form.CheckboxGroup htmlFor='form_example_cb_3' label="Form checkbox">
            <Checkbox id="form_example_cb_1" name="form_example_cb_1" value="bar" />
            <Checkbox id="form_example_cb_2" name="form_example_cb_1" value="buzz" disabled />
            <Checkbox id="form_example_cb_3" name="form_example_cb_1" value="robin" checked />
        </Form.CheckboxGroup>
        <Form.RadioGroup htmlFor='form_example_radiogroup_1' label='Form radio group'>
            <Radio id="form_example_radiogroup_1" name="form_example_radiogroup_1" value="foo" checked />
            <Radio id="form_example_radiogroup_2" name="form_example_radiogroup_1" value="bar" />
            <Radio id="form_example_radiogroup_3" name="form_example_radiogroup_1" value="fizz" />
            <Radio id="form_example_radiogroup_4" name="form_example_radiogroup_1" value="buzz" />
        </Form.RadioGroup>
        <Form.Label text="Form select">
            <Select id="form_example_select_1" name="form_example_select_1" items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />
        </Form.Label>
        <Form.Label text="Form input field">
            <Form.Input id="form_example_input_1" name="form_example_input_1" value="buzz" placeholder="Standard input field" />
        </Form.Label>
        <Form.Section>
            <Form.Switch name='switch_example_1_default' label='Form default switch' />
            <Form.Switch name='switch_example_1_toggled' label='Form switch toggled on' toggled />
            <Form.Switch name='switch_example_1_toggled' label='Form switch toggled and disabled' disabled toggled />
        </Form.Section>
        <Form.Label stacked block text="Form textarea with stacked label">
            <Form.Textarea id="form_example_textarea_1" name="form_example_textarea_1" placeholder="Standard textarea field" />
        </Form.Label>
    </Form.Fieldset>
</Form>

System props

Toggle (switch) components get BACKGROUND BORDER, COMMON, LAYOUT and TYPOGRAPHY system props. Related, children components get similar props, but can have their own, distinct system props. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
labelStringGive your toggle switch an accompanying label text. Recommended.
nameStringForm name to associate the toggle switch instance to
sizeStringSize of the toggle switch. Select from small, medium, large, xlarge, jumbo
roundBooleanChange the switch to a more rounded look-n-feel switch
squareBooleanChange the switch to a square look-n-feel switch
schemeString'dark'Change a toggle switch's color palette. Select from gray, purple, red and many other of the default theme's formStyles
toggledBooleanIf defined, will enable the toggle switch to be in the on state by default