GitHub icon

<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={{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>

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>

<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: true, value2: false, value3: false, value4: false}}>
	{([state, setState]) => (
		<div>
			<Modal
				open
				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>

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 gap-1">
				<Form.Togglebox
					className="m-r--2-i"
					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
					className="m-r--2-i"
					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
					className="m-r--2-i"
					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';

Togglebox