Togglebox
Toggleboxes add prominence and more complex labeling to the form elements checkbox, radio, and toggle switch.
<State initial={{value1: true, value2: false, value3: false}}>{([state, setState]) => (<div><Toggleboxchecked={state.value1}onClick={() => setState(prev => ({...prev, value1: !state.value1}))}label="Red"/><br /><Toggleboxchecked={state.value2}onClick={() => setState(prev => ({...prev, value2: !state.value2}))}label="Blue"/><br /><Toggleboxchecked={state.value3}onClick={() => setState(prev => ({...prev, value3: !state.value3}))}label="Green"/></div>)}</State>
<State initial={1}>{([value, setValue]) => (<div><Toggleboxcontrol="radio"value={1}checked={value === 1}onClick={value => setValue(value)}label="Red"/><br /><Toggleboxcontrol="radio"value={2}checked={value === 2}onClick={value => setValue(value)}label="Blue"/><br /><Toggleboxcontrol="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><Toggleboxcontrol="toggleSwitch"checked={state.value1}onClick={() => setState(prev => ({...prev, value1: !state.value1}))}label="Activate Item ABC"/><br /><Toggleboxcontrol="toggleSwitch"checked={state.value2}onClick={() => setState(prev => ({...prev, value2: !state.value2}))}label="Show Inventory Changes"/><br /><Toggleboxcontrol="toggleSwitch"checked={state.value3}onClick={() => setState(prev => ({...prev, value3: !state.value3}))}label="Show Job Audit"/></div>)}</State>
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.
<State initial={1}>{([value, setValue]) => (<div><Toggleboxcontrol="radio"value={1}checked={value === 1}onClick={value => setValue(value)}title="Rebel Alliance"label="The good guys"/><br /><Toggleboxcontrol="radio"value={2}checked={value === 2}onClick={value => setValue(value)}title="Galactic Empire"label="The bad guys"/><br /><Toggleboxcontrol="radio"value={3}checked={value === 3}onClick={value => setValue(value)}title="Trade Federation"label="Neutral"/></div>)}</State>
<State initial={{value1: true, value2: false, value3: false}}>{([state, setState]) => (<div><Toggleboxchecked={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 /><Toggleboxchecked={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 /><Toggleboxchecked={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>
<Pageheader={<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]) => (<Toggleboxchecked={value}onClick={() => setValue(!value)}control="toggleSwitch"label="Enable Widget XYZ"/>)}</State></Stack></Stack></div>}>Content of a page for Sub Widget XYZ.</Page>
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.Toggleboxchecked={state.value1}onClick={() => setState(prev => ({...prev, value1: !state.value1}))}id="Toggle1"label={"Material"}/><Form.Toggleboxchecked={state.value2}onClick={() => setState(prev => ({...prev, value2: !state.value2}))}id="Toggle2"label={"Equipment"}/><Form.Toggleboxchecked={state.value3}onClick={() => setState(prev => ({...prev, value3: !state.value3}))}id="Toggle3"label={"Purchase Order"}/><Form.Toggleboxchecked={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><Modalopenclosabletitle="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.Toggleboxchecked={state.value1}onClick={() => setState(prev => ({...prev, value1: !state.value1}))}label="Inventory Management"/><Form.Toggleboxchecked={state.value2}onClick={() => setState(prev => ({...prev, value2: !state.value2}))}label="Marketing Operations"/><Form.Toggleboxchecked={state.value3}onClick={() => setState(prev => ({...prev, value3: !state.value3}))}label="Customized Integrations"/><Form.Toggleboxchecked={state.value4}onClick={() => setState(prev => ({...prev, value4: !state.value4}))}label="I'm Just Looking Around"/></Form></Modal></div>)}</State>
<Form><Headline el="div" className="m-b-3" size="small">Default</Headline><Form.Toggleboxname="Toggle-1"label="Togglebox"/><Form.Toggleboxcheckedlabel="Togglebox"/><Form.Toggleboxcontrol="radio"label="Togglebox"/><Form.Toggleboxcontrol="radio"checkedlabel="Togglebox"/><Form.Toggleboxcontrol="toggleSwitch"label="Toggle Switch"/><Form.Toggleboxcontrol="toggleSwitch"checkedlabel="Toggle Switch"/><Form.Toggleboxlabel="Togglebox"description="Description goes here..."/><Headline el="div" className="m-b-3" size="small">Error</Headline><Form.Toggleboxlabel="Error Togglebox"error/><Form.Toggleboxcheckedlabel="Error Togglebox"error/><Form.Toggleboxcontrol="radio"label="Error Togglebox"error/><Form.Toggleboxcontrol="radio"checkedlabel="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.Toggleboxlabel="Error Togglebox"error="This is error Text below the Togglebox."/><Headline el="div" className="m-b-3" size="small">Disabled</Headline><Form.Toggleboxvalue="Test1"name="Toggle-1"label="Disabled Togglebox"disabled/><Form.Toggleboxvalue="Test2"checkedname="Toggle-1"label="Disabled Togglebox"disabled/><Form.Toggleboxcontrol="radio"value="Test1"name="Toggle-1"label="Disabled Togglebox"disabled/><Form.Toggleboxcontrol="radio"value="Test2"checkedname="Toggle-1"label="Disabled Togglebox"disabled/><Form.Toggleboxcontrol="toggleSwitch"value="Test1"name="Toggle-1"label="Disabled Togglebox"disabled/><Form.Toggleboxcontrol="toggleSwitch"value="Test2"checkedname="Toggle-1"label="Disabled Togglebox"disabled/></Form>
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.Toggleboxcontrol="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.Toggleboxcontrol="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.Toggleboxcontrol="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>
import { Togglebox } from '@servicetitan/design-system';