const CheckboxExample = () => {
    const [value, setValue] = React.useState(["Test1"])
    const onClick = (value, checked) => {
        if (checked) {
            setValue(prevState => [...prevState].filter(item => item !== value))
        } else {
            setValue(prevState => [...prevState, value])
        }
    };
    return (
        <div>
            <Togglebox
                value="Test1"
                checked={value.includes("Test1")}
                onClick={onClick}
                name="Toggle-1"
                label={"Red"}
            />
            <br />
            <Togglebox
                value="Test2"
                checked={value.includes("Test2")}
                onClick={onClick}
                name="Toggle-1"
                label={"Blue"}
            />
            <br />
            <Togglebox
                value="Test3"
                checked={value.includes("Test3")}
                onClick={onClick}
                name="Toggle-1"
                label={"Green"}
            />
        </div>
    )
}
render (CheckboxExample)
const RadioExample = () => {
    const [value, setValue] = React.useState("Test2")
    return (
        <div>
            <Togglebox
                control="radio"
                value="Test1"
                checked={value === "Test1"}
                onClick={ (value) => setValue(value) }
                name="Toggle-1"
                label={"Red"}
            />
            <br />
            <Togglebox
                control="radio"
                value="Test2"
                checked={value === "Test2"}
                onClick={ (value) => setValue(value) }
                name="Toggle-1"
                label={"Blue"}
            />
            <br />
            <Togglebox
                control="radio"
                value="Test3"
                checked={value === "Test3"}
                onClick={ (value) => setValue(value) }
                name="Toggle-1"
                label={"Green"}
            />
        </div>
    )
}
render (RadioExample)
const SwitchExample = () => {
    const [value, setValue] = React.useState(["Test3"])
    const onClick = (value, checked) => {
        if (checked) {
            setValue(prevState => [...prevState].filter(item => item !== value))
        } else {
            setValue(prevState => [...prevState, value])
        }
    };
    return (
        <div>
            <Togglebox
                control="toggleSwitch"
                value="Test1"
                checked={value.includes("Test1")}
                onClick={onClick}
                name="Toggle-1"
                label={"Activate Item ABC"}
            />
            <br />
            <Togglebox
                control="toggleSwitch"
                value="Test2"
                checked={value.includes("Test2")}
                onClick={onClick}
                name="Toggle-1"
                label={"Show Inventory Changes"}
            />
            <br />
            <Togglebox
                control="toggleSwitch"
                value="Test3"
                checked={value.includes("Test3")}
                onClick={onClick}
                name="Toggle-1"
                label={"Show Job Audit"}
            />
        </div>
    )
}
render (SwitchExample)

Custom Content

Toggleboxes have both a title and a label. The title is an optional line of text, while the label is an open field for custom content.

Title and simple label

const TitleWithSimpleLabelExample = () => {
    const [value, setValue] = React.useState([])
    return (
        <div>
            <Togglebox
                control="radio"
                value="Test1"
                checked={value.includes("Test1")}
                onClick={ (value) => setValue(value) }
                name="Toggle-1"
                title="Rebel Alliance"
                label="The good guys"
            />
            <br />
            <Togglebox
                control="radio"
                value="Test2"
                checked={value.includes("Test2")}
                onClick={ (value) => setValue(value) }
                name="Toggle-1"
                title="Galactic Empire"
                label="The bad guys"
            />
            <br />
            <Togglebox
                control="radio"
                value="Test3"
                checked={value.includes("Test3")}
                onClick={ (value) => setValue(value) }
                name="Toggle-1"
                title="Trade Federation"
                label="Neutral"
            />
        </div>
    )
}
render (TitleWithSimpleLabelExample)

No title, complex label

const NoTitleComplexLabelExample = () => {
    const [value, setValue] = React.useState([])
    const onClick = (value, checked) => {
        if (checked) {
            setValue(prevState => [...prevState].filter(item => item !== value))
        } else {
            setValue(prevState => [...prevState, value])
        }
    };
    return (
        <div>
            <Togglebox
                value="Test1"
                checked={value.includes("Test1")}
                onClick={onClick}
                name="Toggle-1"
                label={
                    <Stack alignItems='center' justifyContent='space-between' className="w-100">
                        <Stack.Item className="m-l-1">
                            <BodyText bold>Invoice Detail Daily</BodyText>
                            <BodyText el="div" size="small" subdued>Recipients: Jane Doe, John Doe, Bob Smith, Erica Brown</BodyText>
                        </Stack.Item>
                        <Stack.Item className="d-f"><Tag>Sent Daily</Tag> <BodyText size="small" subdued className="m-r-1 m-l-2">Next send date 01/09/2019</BodyText></Stack.Item>
                    </Stack>
                }
            />
            <br />
            <Togglebox
                value="Test2"
                checked={value.includes("Test2")}
                onClick={onClick}
                name="Toggle-1"
                label={
                    <Stack alignItems='center' justifyContent='space-between' className="w-100">
                        <Stack.Item className="m-l-1">
                            <BodyText bold>Inventory Detail Daily</BodyText>
                            <BodyText el="div" size="small" subdued>Recipients: Bob Jackson, Ashley Doe, Bob Smith, Erica Brown</BodyText>
                        </Stack.Item>
                        <Stack.Item className="d-f"><Tag>Sent Daily</Tag> <BodyText  size="small" subdued className="m-r-1 m-l-2">Next send date 01/09/2019</BodyText></Stack.Item>
                    </Stack>
                }
            />
            <br />
            <Togglebox
                value="Test3"
                checked={value.includes("Test3")}
                onClick={onClick}
                name="Toggle-1"
                label={
                    <Stack alignItems='center' justifyContent='space-between' className="w-100">
                        <Stack.Item className="m-l-1">
                            <BodyText bold>Replenishment Data</BodyText>
                            <BodyText el="div" size="small" subdued>Recipients: Jane Doe, John Doe, Bob Smith, Erica Brown</BodyText>
                        </Stack.Item>
                        <Stack.Item className="d-f"><Tag>Sent Weekly</Tag> <BodyText size="small" subdued className="m-r-1 m-l-2">Next send date 01/15/2019</BodyText></Stack.Item>
                    </Stack>
                }
            />
        </div>
    )
}
render (NoTitleComplexLabelExample)
scaled: true
---
const NoTitleComplexLabelExample2 = () => {
    const [value, setValue] = React.useState([])
    const onClick = (value, checked) => {
        if (checked) {
            setValue(prevState => [...prevState].filter(item => item !== value))
        } else {
            setValue(prevState => [...prevState, value])
        }
    };
    return (
        <Page
            header={
                <div>
                    <Breadcrumb className="m-b-4">
                        <Breadcrumb.Link label="Home" />
                        <Breadcrumb.Link label="Sub Page" />
                        <Breadcrumb.Link label="Inventory Management" />
                    </Breadcrumb>
                    <Stack alignItems="center" spacing="0">
                        <Stack.Item fill>
                            <Headline size="large">Sub Widget XYZ</Headline>
                            <BodyText subdued>A short page description.</BodyText>
                        </Stack.Item>
                        <Stack spacing={3}>
                            <Button size="large">Action</Button>
                            <Togglebox
                                control="toggleSwitch"
                                value="Test1"
                                checked={value.includes("Test1")}
                                onClick={onClick}
                                name="Toggle-1"
                                label={"Enable Widget XYZ"}
                            />
                        </Stack>
                    </Stack>
                </div>
            }
        >
            Content of a page for Sub Widget XYZ.
        </Page>
    )
}
render (NoTitleComplexLabelExample2)

In A Form

The togglebox can be incorporated into the Form component.

const InFormExample1 = () => {
    const [value, setValue] = React.useState([])
    const onClick = (value, checked) => {
        if (checked) {
            setValue(prevState => [...prevState].filter(item => item !== value))
        } else {
            setValue(prevState => [...prevState, value])
        }
    };
    return (
        <Form>
            <Headline el="div" className="m-b-4">Add Contact</Headline>
            <Form.Field width="5">
                <Form.Input large label="First Name" placeholder="Leia" />
                <Form.Input large label="Last Name" placeholder="Organa" />
            </Form.Field>
            <BodyText el="div" size="small" bold className="m-b-1 d-b">Select your boxes</BodyText>
            <Form.Group>
                <Form.Togglebox
                    value="value1"
                    checked={value.includes("value1")}
                    onClick={onClick}
                    name="Toggle1"
                    id="Toggle1"
                    label={"Material"}
                />
                <Form.Togglebox
                    value="value2"
                    checked={value.includes("value2")}
                    onClick={onClick}
                    name="Toggle1"
                    id="Toggle2"
                    label={"Equipment"}
                />
                <Form.Togglebox
                    value="value3"
                    checked={value.includes("value3")}
                    onClick={onClick}
                    name="Toggle1"
                    id="Toggle3"
                    label={"Purchase Order"}
                />
                <Form.Togglebox
                    value="value4"
                    checked={value.includes("value4")}
                    onClick={onClick}
                    name="Toggle1"
                    id="Toggle4"
                    label={"Labor"}
                />
            </Form.Group>
            <Form.Select width="5" label="Home Planet" placeholder="Choose Planet" options={[
                {key:1, value: 1, text: 'Alderaan'},
                {key:2, value: 2, text: 'Bespin'},
                {key:3, value: 3, text: 'Coruscant'},
                {key:4, value: 4, text: 'Dagobah'},
                {key:5, value: 5, text: 'Hoth'},
                {key:6, value: 6, text: 'Kashyyyk'},
                {key:7, value: 7, text: 'Naboo',},
                {key:8, value: 8, text: 'Tatooine'},
                {key:9, value: 9, text: 'Yavin'},
            ]} />
            <Form.Group>
                <Form.Button primary>Save Contact</Form.Button>
                <Form.Button>Cancel</Form.Button>
            </Form.Group>
        </Form>
    )
}
render (InFormExample1)
frame: true
---
const InFormExample2 = () => {
    const [value, setValue] = React.useState([])
    const onClick = (value, checked) => {
        if (checked) {
            setValue(prevState => [...prevState].filter(item => item !== value))
        } else {
            setValue(prevState => [...prevState, value])
        }
    };
    return (
        <div style={{ height: '600px' }}>
            <Modal
                open={true}
                closable={true}
                title="Modal Title"
                footer={<ButtonGroup>
                    <Button>Cancel</Button>
                    <Button primary>Submit</Button>
                </ButtonGroup>}
                portal={false}
                size="S"
            >
            <Headline size="small" className="m-b-3">What will you use this for?</Headline>
                <Form>
                    <Form.Field>
                        <Form.Togglebox
                            value="value1"
                            checked={value.includes("value1")}
                            onClick={onClick}
                            name="Toggle1"
                            id="Toggle1"
                            label={"Inventory Management"}
                        />
                        <Form.Togglebox
                            value="value2"
                            checked={value.includes("value2")}
                            onClick={onClick}
                            name="Toggle1"
                            id="Toggle2"
                            label={"Marketing Operations"}
                        />
                        <Form.Togglebox
                            value="value3"
                            checked={value.includes("value3")}
                            onClick={onClick}
                            name="Toggle1"
                            id="Toggle3"
                            label={"Customized Integrations"}
                        />
                        <Form.Togglebox
                            value="value4"
                            checked={value.includes("value4")}
                            onClick={onClick}
                            name="Toggle1"
                            id="Toggle4"
                            label={"I'm Just Looking Around"}
                        />
                    </Form.Field>
                </Form>
            </Modal>
        </div>
    )
}
render (InFormExample2)

States

<Form>
    <Headline el="div" className="m-b-4" size="small">Default Toggleboxes</Headline>
    <Form.Togglebox
        value="Test1"
        name="Toggle-1"
        label="Togglebox"
    />
    <Form.Togglebox
        value="Test2"
        checked
        name="Toggle-1"
        label="Togglebox"
    />
    <Form.Togglebox
        control="radio"
        value="Test1"
        name="Toggle-1"
        label="Togglebox"
    />
    <Form.Togglebox
        control="radio"
        value="Test2"
        checked
        name="Toggle-1"
        label="Togglebox"
    />
    <Form.Togglebox
        control="toggleSwitch"
        value="Test1"
        name="Toggle-1"
        label="Togglebox"
    />
    <Form.Togglebox
        control="toggleSwitch"
        value="Test2"
        checked
        name="Toggle-1"
        label="Togglebox"
    />
    <Form.Togglebox
        value="Test1"
        name="Toggle-1"
        label="Togglebox"
        description="Description goes here..."
    />
</Form>
<Form>
    <Headline el="div" className="m-b-4" size="small">Error Toggleboxes</Headline>
    <Form.Togglebox
        value="Test1"
        name="Toggle-1"
        label="Error Togglebox"
        error
    />
    <Form.Togglebox
        value="Test2"
        checked
        name="Toggle-1"
        label="Error Togglebox"
        error
    />
    <Form.Togglebox
        control="radio"
        value="Test1"
        name="Toggle-1"
        label="Error Togglebox"
        error
    />
    <Form.Togglebox
        control="radio"
        value="Test2"
        checked
        name="Toggle-1"
        label="Error Togglebox"
        error
    />
    <Form.Togglebox
        value="Test1"
        name="Toggle-1"
        label="Error Togglebox"
        error="This is error Text below the Togglebox."
    />
</Form>

The Toggle Switch variation does not have an error state.

<Form>
    <Headline el="div" className="m-b-4" size="small">Disabled Toggleboxes</Headline>
    <Form.Togglebox
        value="Test1"
        name="Toggle-1"
        label="Disabled Togglebox"
        disabled
    />
    <Form.Togglebox
        value="Test2"
        checked
        name="Toggle-1"
        label="Disabled Togglebox"
        disabled
    />
    <Form.Togglebox
        control="radio"
        value="Test1"
        name="Toggle-1"
        label="Disabled Togglebox"
        disabled
    />
    <Form.Togglebox
        control="radio"
        value="Test2"
        checked
        name="Toggle-1"
        label="Disabled Togglebox"
        disabled
    />
    <Form.Togglebox
        control="toggleSwitch"
        value="Test1"
        name="Toggle-1"
        label="Disabled Togglebox"
        disabled
    />
    <Form.Togglebox
        control="toggleSwitch"
        value="Test2"
        checked
        name="Toggle-1"
        label="Disabled Togglebox"
        disabled
    />
</Form>

Control Alignment

By default, the control (Radio, Checkbox, or Toggle switch) is vertically centered in the Togglebox. The control can also be aligned to the top. This is useful for taller Toggleboxes where the content is not center aligned. The control will be aligned to the title, if it exists.

const ControlAlignmentExample = () => {
    const [value, setValue] = React.useState("Test2")
    return (
        <Form>
            <Form.Group>
                <Form.Togglebox
                    control="radio"
                    controlAlign="top"
                    value="Test1"
                    checked={value === "Test1"}
                    onClick={ (value) => setValue(value) }
                    name="Toggle-1"
                    title="Overnight shipping"
                    label={
                        <BodyText subdued size="small">
                            $4.50 / each
                            <br />
                            Estimated delivery: 1 business day
                        </BodyText>
                    }
                />
                <Form.Togglebox
                    control="radio"
                    controlAlign="top"
                    value="Test2"
                    checked={value === "Test2"}
                    onClick={ (value) => setValue(value) }
                    name="Toggle-1"
                    title="Priority shipping"
                    label={
                        <BodyText subdued size="small">
                            $1.50 / each
                            <br />
                            Estimated delivery: 3–4 business days
                        </BodyText>
                    }
                />
                <Form.Togglebox
                    control="radio"
                    controlAlign="top"
                    value="Test3"
                    checked={value === "Test3"}
                    onClick={ (value) => setValue(value) }
                    name="Toggle-1"
                    title="Standard shipping"
                    label={
                        <BodyText subdued size="small">
                            $0.75 / each
                            <br />
                            Estimated delivery: 5–7 business days
                        </BodyText>
                    }
                />
            </Form.Group>
        </Form>
    )
}
render (ControlAlignmentExample)

Best Practices

  • With custom labels, avoid adding interactive elements inside the Togglebox.
  • The best practices of the individual form components are applicable to the Togglebox.

Related Components


Importing

import { Togglebox } from '@servicetitan/design-system';