Togglebox

<State initial={{value1: true, value2: false, value3: false}}>
    {([state, setState]) => (
        <div>
            <Togglebox
                checked={state.value1}
                onClick={() => setState(prev => ({...prev, value1: !state.value1}))}
                label="Red"
            />
            <br />
            <Togglebox
                checked={state.value2}
                onClick={() => setState(prev => ({...prev, value2: !state.value2}))}
                label="Blue"
            />
            <br />
            <Togglebox
                checked={state.value3}
                onClick={() => setState(prev => ({...prev, value3: !state.value3}))}
                label="Green"
            />
        </div>
    )}
</State>

<State initial={{value1: true, value2: false, value3: false}}>
    {([state, setState]) => (
        <div>
            <Togglebox
                checked={state.value1}
                onClick={() => setState(prev => ({...prev, value1: !state.value1}))}
                label="Red"
            />
            <br />
            <Togglebox
                checked={state.value2}
                onClick={() => setState(prev => ({...prev, value2: !state.value2}))}
                label="Blue"
            />
            <br />
            <Togglebox
                checked={state.value3}
                onClick={() => setState(prev => ({...prev, value3: !state.value3}))}
                label="Green"
            />
        </div>
    )}
</State>

<State initial={1}>
    {([value, setValue]) => (
        <div>
            <Togglebox
                control="radio"
                value={1}
                checked={value === 1}
                onClick={value => setValue(value)}
                label="Red"
            />
            <br />
            <Togglebox
                control="radio"
                value={2}
                checked={value === 2}
                onClick={value => setValue(value)}
                label="Blue"
            />
            <br />
            <Togglebox
                control="radio"
                value={3}
                checked={value === 3}
                onClick={value => setValue(value)}
                label="Green"
            />
        </div>
    )}
</State>

<State initial={1}>
    {([value, setValue]) => (
        <div>
            <Togglebox
                control="radio"
                value={1}
                checked={value === 1}
                onClick={value => setValue(value)}
                label="Red"
            />
            <br />
            <Togglebox
                control="radio"
                value={2}
                checked={value === 2}
                onClick={value => setValue(value)}
                label="Blue"
            />
            <br />
            <Togglebox
                control="radio"
                value={3}
                checked={value === 3}
                onClick={value => setValue(value)}
                label="Green"
            />
        </div>
    )}
</State>

<State initial={{value1: true, value2: false, value3: false}}>
    {([state, setState]) => (
        <div>
            <Togglebox
                control="toggleSwitch"
                checked={state.value1}
                onClick={() => setState(prev => ({...prev, value1: !state.value1}))}
                label="Activate Item ABC"
            />
            <br />
            <Togglebox
                control="toggleSwitch"
                checked={state.value2}
                onClick={() => setState(prev => ({...prev, value2: !state.value2}))}
                label="Show Inventory Changes"
            />
            <br />
            <Togglebox
                control="toggleSwitch"
                checked={state.value3}
                onClick={() => setState(prev => ({...prev, value3: !state.value3}))}
                label="Show Job Audit"
            />
        </div>
    )}
</State>

<State initial={{value1: true, value2: false, value3: false}}>
    {([state, setState]) => (
        <div>
            <Togglebox
                control="toggleSwitch"
                checked={state.value1}
                onClick={() => setState(prev => ({...prev, value1: !state.value1}))}
                label="Activate Item ABC"
            />
            <br />
            <Togglebox
                control="toggleSwitch"
                checked={state.value2}
                onClick={() => setState(prev => ({...prev, value2: !state.value2}))}
                label="Show Inventory Changes"
            />
            <br />
            <Togglebox
                control="toggleSwitch"
                checked={state.value3}
                onClick={() => setState(prev => ({...prev, value3: !state.value3}))}
                label="Show Job Audit"
            />
        </div>
    )}
</State>

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

<State initial={1}>
    {([value, setValue]) => (
        <div>
            <Togglebox
                control="radio"
                value={1}
                checked={value === 1}
                onClick={value => setValue(value)}
                title="Rebel Alliance"
                label="The good guys"
            />
            <br />
            <Togglebox
                control="radio"
                value={2}
                checked={value === 2}
                onClick={value => setValue(value)}
                title="Galactic Empire"
                label="The bad guys"
            />
            <br />
            <Togglebox
                control="radio"
                value={3}
                checked={value === 3}
                onClick={value => setValue(value)}
                title="Trade Federation"
                label="Neutral"
            />
        </div>
    )}
</State>

<State initial={1}>
    {([value, setValue]) => (
        <div>
            <Togglebox
                control="radio"
                value={1}
                checked={value === 1}
                onClick={value => setValue(value)}
                title="Rebel Alliance"
                label="The good guys"
            />
            <br />
            <Togglebox
                control="radio"
                value={2}
                checked={value === 2}
                onClick={value => setValue(value)}
                title="Galactic Empire"
                label="The bad guys"
            />
            <br />
            <Togglebox
                control="radio"
                value={3}
                checked={value === 3}
                onClick={value => setValue(value)}
                title="Trade Federation"
                label="Neutral"
            />
        </div>
    )}
</State>

No title, complex label

<State initial={{value1: true, value2: false, value3: false}}>
    {([state, setState]) => (
        <div>
            <Togglebox
                checked={state.value1}
                onClick={() => setState(prev => ({...prev, value1: !state.value1}))}
                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
                checked={state.value2}
                onClick={() => setState(prev => ({...prev, value2: !state.value2}))}
                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
                checked={state.value3}
                onClick={() => setState(prev => ({...prev, value3: !state.value3}))}
                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>
    )}
</State>

<State initial={{value1: true, value2: false, value3: false}}>
    {([state, setState]) => (
        <div>
            <Togglebox
                checked={state.value1}
                onClick={() => setState(prev => ({...prev, value1: !state.value1}))}
                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
                checked={state.value2}
                onClick={() => setState(prev => ({...prev, value2: !state.value2}))}
                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
                checked={state.value3}
                onClick={() => setState(prev => ({...prev, value3: !state.value3}))}
                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>
    )}
</State>

<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>
                    <State initial={true}>
                        {([value, setValue]) => (
                            <Togglebox
                                checked={value}
                                onClick={() => setValue(!value)}
                                control="toggleSwitch"
                                label="Enable Widget XYZ"
                            />
                        )}
                    </State>
                </Stack>
            </Stack>
        </div>
    }
>
    Content of a page for Sub Widget XYZ.
</Page>

<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>
                    <State initial={true}>
                        {([value, setValue]) => (
                            <Togglebox
                                checked={value}
                                onClick={() => setValue(!value)}
                                control="toggleSwitch"
                                label="Enable Widget XYZ"
                            />
                        )}
                    </State>
                </Stack>
            </Stack>
        </div>
    }
>
    Content of a page for Sub Widget XYZ.
</Page>

In A Form

The togglebox can be incorporated into the Form component.

<State initial={{value1: false, value2: false, value3: false, value4: false}}>
    {([state, setState]) => (
        <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
                    checked={state.value1}
                    onClick={() => setState(prev => ({...prev, value1: !state.value1}))}
                    id="Toggle1"
                    label={"Material"}
                />
                <Form.Togglebox
                    checked={state.value2}
                    onClick={() => setState(prev => ({...prev, value2: !state.value2}))}
                    id="Toggle2"
                    label={"Equipment"}
                />
                <Form.Togglebox
                    checked={state.value3}
                    onClick={() => setState(prev => ({...prev, value3: !state.value3}))}
                    id="Toggle3"
                    label={"Purchase Order"}
                />
                <Form.Togglebox
                    checked={state.value4}
                    onClick={() => setState(prev => ({...prev, value4: !state.value4}))}
                    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>
    )}
</State>

<State initial={{value1: false, value2: false, value3: false, value4: false}}>
    {([state, setState]) => (
        <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
                    checked={state.value1}
                    onClick={() => setState(prev => ({...prev, value1: !state.value1}))}
                    id="Toggle1"
                    label={"Material"}
                />
                <Form.Togglebox
                    checked={state.value2}
                    onClick={() => setState(prev => ({...prev, value2: !state.value2}))}
                    id="Toggle2"
                    label={"Equipment"}
                />
                <Form.Togglebox
                    checked={state.value3}
                    onClick={() => setState(prev => ({...prev, value3: !state.value3}))}
                    id="Toggle3"
                    label={"Purchase Order"}
                />
                <Form.Togglebox
                    checked={state.value4}
                    onClick={() => setState(prev => ({...prev, value4: !state.value4}))}
                    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>
    )}
</State>

<State initial={{value1: true, value2: false, value3: false, value4: false}}>
    {([state, setState]) => (
        <div>
            <Modal
                open
                closable
                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.Togglebox
                        checked={state.value1}
                        onClick={() => setState(prev => ({...prev, value1: !state.value1}))}
                        label="Inventory Management"
                    />
                    <Form.Togglebox
                        checked={state.value2}
                        onClick={() => setState(prev => ({...prev, value2: !state.value2}))}
                        label="Marketing Operations"
                    />
                    <Form.Togglebox
                        checked={state.value3}
                        onClick={() => setState(prev => ({...prev, value3: !state.value3}))}
                        label="Customized Integrations"
                    />
                    <Form.Togglebox
                        checked={state.value4}
                        onClick={() => setState(prev => ({...prev, value4: !state.value4}))}
                        label="I'm Just Looking Around"
                    />
                </Form>
            </Modal>
        </div>
    )}
</State>

<State initial={{value1: true, value2: false, value3: false, value4: false}}>
    {([state, setState]) => (
        <div>
            <Modal
                open
                closable
                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.Togglebox
                        checked={state.value1}
                        onClick={() => setState(prev => ({...prev, value1: !state.value1}))}
                        label="Inventory Management"
                    />
                    <Form.Togglebox
                        checked={state.value2}
                        onClick={() => setState(prev => ({...prev, value2: !state.value2}))}
                        label="Marketing Operations"
                    />
                    <Form.Togglebox
                        checked={state.value3}
                        onClick={() => setState(prev => ({...prev, value3: !state.value3}))}
                        label="Customized Integrations"
                    />
                    <Form.Togglebox
                        checked={state.value4}
                        onClick={() => setState(prev => ({...prev, value4: !state.value4}))}
                        label="I'm Just Looking Around"
                    />
                </Form>
            </Modal>
        </div>
    )}
</State>

States

<Form>
    <Headline el="div" className="m-b-3" size="small">Default</Headline>
    <Form.Togglebox
        name="Toggle-1"
        label="Togglebox"
    />
    <Form.Togglebox
        checked
        label="Togglebox"
    />
    <Form.Togglebox
        control="radio"
        label="Togglebox"
    />
    <Form.Togglebox
        control="radio"
        checked
        label="Togglebox"
    />
    <Form.Togglebox
        control="toggleSwitch"
        label="Toggle Switch"
    />
    <Form.Togglebox
        control="toggleSwitch"
        checked
        label="Toggle Switch"
    />
    <Form.Togglebox
        label="Togglebox"
        description="Description goes here..."
    />
    <Headline el="div" className="m-b-3" size="small">Error</Headline>
    <Form.Togglebox
        label="Error Togglebox"
        error
    />
    <Form.Togglebox
        checked
        label="Error Togglebox"
        error
    />
    <Form.Togglebox
        control="radio"
        label="Error Togglebox"
        error
    />
    <Form.Togglebox
        control="radio"
        checked
        label="Error Togglebox"
        error
    />
    <BodyText className="m-b-4">
        <Icon name="warning" size="22" className="opacity-disabled m-r-1" />
        Toggle Switch variation does not have an error state.
    </BodyText>
    <Form.Togglebox
        label="Error Togglebox"
        error="This is error Text below the Togglebox."
    />
    <Headline el="div" className="m-b-3" size="small">Disabled</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>

<Form>
    <Headline el="div" className="m-b-3" size="small">Default</Headline>
    <Form.Togglebox
        name="Toggle-1"
        label="Togglebox"
    />
    <Form.Togglebox
        checked
        label="Togglebox"
    />
    <Form.Togglebox
        control="radio"
        label="Togglebox"
    />
    <Form.Togglebox
        control="radio"
        checked
        label="Togglebox"
    />
    <Form.Togglebox
        control="toggleSwitch"
        label="Toggle Switch"
    />
    <Form.Togglebox
        control="toggleSwitch"
        checked
        label="Toggle Switch"
    />
    <Form.Togglebox
        label="Togglebox"
        description="Description goes here..."
    />
    <Headline el="div" className="m-b-3" size="small">Error</Headline>
    <Form.Togglebox
        label="Error Togglebox"
        error
    />
    <Form.Togglebox
        checked
        label="Error Togglebox"
        error
    />
    <Form.Togglebox
        control="radio"
        label="Error Togglebox"
        error
    />
    <Form.Togglebox
        control="radio"
        checked
        label="Error Togglebox"
        error
    />
    <BodyText className="m-b-4">
        <Icon name="warning" size="22" className="opacity-disabled m-r-1" />
        Toggle Switch variation does not have an error state.
    </BodyText>
    <Form.Togglebox
        label="Error Togglebox"
        error="This is error Text below the Togglebox."
    />
    <Headline el="div" className="m-b-3" size="small">Disabled</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.

<State initial={2}>
    {([value, setValue]) => (
        <Form>
            <Form.Group className="align-items-stretch m-r-1">
                <Form.Togglebox
                    control="radio"
                    controlAlign="top"
                    value={1}
                    checked={value === 1}
                    onClick={value => setValue(value)}
                    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={2}
                    checked={value === 2}
                    onClick={value => setValue(value)}
                    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={3}
                    checked={value === 3}
                    onClick={value => setValue(value)}
                    title="Standard shipping"
                    label={
                        <BodyText subdued size="small">
                            $0.75 / each
                            <br />
                            Estimated delivery: 5–7 business days
                        </BodyText>
                    }
                />
            </Form.Group>
        </Form>
    )}
</State>

<State initial={2}>
    {([value, setValue]) => (
        <Form>
            <Form.Group className="align-items-stretch m-r-1">
                <Form.Togglebox
                    control="radio"
                    controlAlign="top"
                    value={1}
                    checked={value === 1}
                    onClick={value => setValue(value)}
                    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={2}
                    checked={value === 2}
                    onClick={value => setValue(value)}
                    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={3}
                    checked={value === 3}
                    onClick={value => setValue(value)}
                    title="Standard shipping"
                    label={
                        <BodyText subdued size="small">
                            $0.75 / each
                            <br />
                            Estimated delivery: 5–7 business days
                        </BodyText>
                    }
                />
            </Form.Group>
        </Form>
    )}
</State>

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.

Components

For a simpler selections, use the Checkbox, Radio, or Toggle Switch component.

Patterns

Form design pattern for how related controls are ordered.

Importing

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