Components

Choice tiles

Enable users to select a single value from a list of choices that support more complex content than regular radio buttons.

Basic usage

Import ChoiceTiles and compose each choice from a ChoiceTiles.Choice, with a ChoiceTiles.Title and a ChoiceTiles.Description. Give the group an aria-label.

import {ChoiceTiles} from '@pleo-io/telescope'


const AccessLevel = () => (
    <ChoiceTiles aria-label="Access level" defaultValue="essential">
        <ChoiceTiles.Choice value="essential" id="essential">
            <ChoiceTiles.Title>Essential</ChoiceTiles.Title>
            <ChoiceTiles.Description>Basic rights to perform bookkeeping</ChoiceTiles.Description>
        </ChoiceTiles.Choice>
        <ChoiceTiles.Choice value="extended" id="extended">
            <ChoiceTiles.Title>Extended</ChoiceTiles.Title>
            <ChoiceTiles.Description>
                All essential rights plus administrator rights
            </ChoiceTiles.Description>
        </ChoiceTiles.Choice>
    </ChoiceTiles>
)

Use value and onValueChange for a controlled group, or defaultValue for an uncontrolled one.

Tag

Pass a ChoiceTiles.Tag inside ChoiceTiles.Title to highlight a choice, for example as recommended.

<ChoiceTiles.Title>
    Extended<ChoiceTiles.Tag variant="green">Recommended</ChoiceTiles.Tag>
</ChoiceTiles.Title>

Expanded content

Pass expandedContent to a ChoiceTiles.Choice to show more details below it.

<ChoiceTiles.Choice
    value="essential"
    id="essential"
    expandedContent={<Text variant="body-s">Extra content for this choice</Text>}
>
    <ChoiceTiles.Title>Essential</ChoiceTiles.Title>
    <ChoiceTiles.Description>Basic rights to perform bookkeeping</ChoiceTiles.Description>
</ChoiceTiles.Choice>

Horizontal orientation

Pass orientation="horizontal" to lay the choices out in a row. Use ChoiceTiles.Separator, ChoiceTiles.List and ChoiceTiles.ListItem to add a list of features to each choice.

<ChoiceTiles aria-label="Access level" defaultValue="essential" orientation="horizontal">
    <ChoiceTiles.Choice value="essential" id="essential">
        <ChoiceTiles.Title>Essential actions</ChoiceTiles.Title>
        <ChoiceTiles.Description>Basic rights to perform bookkeeping</ChoiceTiles.Description>
        <ChoiceTiles.Separator />
        <ChoiceTiles.List>
            <ChoiceTiles.ListItem>
                <Check size={16} />
                <Text>See and edit expenses</Text>
            </ChoiceTiles.ListItem>
            <ChoiceTiles.ListItem>
                <Close size={16} />
                <Text>Individual spending limits</Text>
            </ChoiceTiles.ListItem>
        </ChoiceTiles.List>
    </ChoiceTiles.Choice>
    {/* more choices */}
</ChoiceTiles>

Disabled

Pass disabled to ChoiceTiles to disable every choice, or to a single ChoiceTiles.Choice to disable only that choice.

<ChoiceTiles aria-label="Access level" defaultValue="extended">
    <ChoiceTiles.Choice value="essential" id="essential" disabled>
        <ChoiceTiles.Title>Essential</ChoiceTiles.Title>
    </ChoiceTiles.Choice>
    <ChoiceTiles.Choice value="extended" id="extended">
        <ChoiceTiles.Title>Extended</ChoiceTiles.Title>
    </ChoiceTiles.Choice>
</ChoiceTiles>

Loading state

Use ChoiceTilesLoadingSkeleton while the choices are loading. Pass numberOfChoices to match the number of choices you expect to render.

import {ChoiceTilesLoadingSkeleton} from '@pleo-io/telescope'


const Loading = () => <ChoiceTilesLoadingSkeleton numberOfChoices={3} />

Custom content

You can render your own content inside ChoiceTiles.Choice. Everything inside a choice is wrapped in a label element, so avoid block-level elements such as div to keep the markup valid. The same applies to the children of ChoiceTiles.Title and ChoiceTiles.Description, which are rendered inside a Text component.

API reference

A group of selectable tiles, for choices that need more context than a regular radio button.

Prop	Type	Default
`orientation`	`enum`	`vertical`

ChoiceTiles.Choice

Prop	Type	Default
`children` (required)	`enum`
`className`	`enum`
`expandedContent`	`enum`
`id` (required)	`string`
`value` (required)	`string`

ChoiceTiles.Title

Prop	Type	Default
`children` (required)	`enum`
`className`	`enum`

ChoiceTiles.Tag

Prop	Type	Default
`children` (required)	`enum`
`Icon`	`enum`
`variant`	`enum`

ChoiceTiles.Description

Prop	Type	Default
`children` (required)	`enum`
`className`	`enum`

ChoiceTilesLoadingSkeleton

Prop	Type	Default
`numberOfChoices`	`enum`	`2`

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

Edit this page