Radio Tile

A series of selectable tile components that behave like radio button. You may include icons to help make each tile more identifiable.

 
import * as React from 'react';
import { RadioTileGroup, RadioTile } from '@itwin/itwinui-react';
import { SvgNetwork, SvgWindows } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <RadioTileGroup className='demo-radio-tile-group'>
      <RadioTile
        label='Web'
        description='Dimensions in px'
        icon={<SvgNetwork />}
        defaultChecked
        name='OS'
        value='Web'
      />
      <RadioTile
        label='iOS'
        description='Dimensions in pt'
        icon={
          <svg aria-hidden='true' viewBox='0 0 16 16'>
            <path d='m14.38732 12.46864a8.67507 8.67507 0 0 1 -.85133 1.54667 7.83909 7.83909 0 0 1 -1.096 1.33933 2.11842 2.11842 0 0 1 -1.40933.62733 3.50824 3.50824 0 0 1 -1.30133-.314 3.7014 3.7014 0 0 0 -1.40133-.31333 3.82728 3.82728 0 0 0 -1.44066.31333 3.84425 3.84425 0 0 1 -1.24467.33067 1.98968 1.98968 0 0 1 -1.44066-.644 8.203 8.203 0 0 1 -1.14667-1.38664 9.61729 9.61729 0 0 1 -1.21266-2.43466 8.99338 8.99338 0 0 1 -.50933-2.90134 5.34287 5.34287 0 0 1 .68865-2.772 4.05969 4.05969 0 0 1 1.44134-1.474 3.84792 3.84792 0 0 1 1.94933-.556 4.55944 4.55944 0 0 1 1.50733.35466 4.79788 4.79788 0 0 0 1.196.35534 7.06478 7.06478 0 0 0 1.326-.41866 4.34039 4.34039 0 0 1 1.802-.32334 3.8146 3.8146 0 0 1 2.99733 1.59533 3.37671 3.37671 0 0 0 -1.768 3.062 3.3911 3.3911 0 0 0 1.09733 2.54467 3.59839 3.59839 0 0 0 1.096.72733q-.132.386-.27933.74133zm-3.05466-12.14864a3.43565 3.43565 0 0 1 -.86533 2.23866 2.93869 2.93869 0 0 1 -2.45 1.22267 2.58687 2.58687 0 0 1 -.018-.30334 3.63848 3.63848 0 0 1 2.03667-3.11132 3.30968 3.30968 0 0 1 1.28-.36667 2.86658 2.86658 0 0 1 .01667.32z' />
          </svg>
        }
        name='OS'
        value='iOS'
      />
      <RadioTile
        label='Android'
        description='Dimensions in dp/sp'
        icon={
          <svg aria-hidden='true' viewBox='0 0 16 16'>
            <path d='m3.28467 6.184v4.122a.97577.97577 0 1 1 -1.95134 0v-4.122a.97576.97576 0 1 1 1.95134 0zm2.58133-4.71533-.688-1.25934a.14184.14184 0 0 1 .054-.19133.13814.13814 0 0 1 .18867.05467l.696 1.27333a4.63366 4.63366 0 0 1 3.76666 0l.696-1.27333a.1368.1368 0 0 1 .18867-.05467.14184.14184 0 0 1 .054.19133l-.688 1.25934a4.03915 4.03915 0 0 1 2.218 3.546h-8.704a4.03915 4.03915 0 0 1 2.218-3.546zm3.77933 1.56266a.36337.36337 0 1 0 .36334-.36866.36621.36621 0 0 0 -.36334.36866zm-4.01733 0a.36337.36337 0 1 0 .36333-.36866.3662.3662 0 0 0 -.36333.36866zm8.06267 2.16334a.98351.98351 0 0 0 -.97534.98933v4.122a.97577.97577 0 1 0 1.95134 0v-4.122a.98365.98365 0 0 0 -.976-.98933zm-10.04267.16933v6.39733a1.05948 1.05948 0 0 0 1.052 1.06667h.69867v2.18267a.97543.97543 0 1 0 1.95066 0v-2.18267h1.30134v2.18267a.97543.97543 0 1 0 1.95066 0v-2.18267h.69867a1.05948 1.05948 0 0 0 1.052-1.06667v-6.39733z' />
          </svg>
        }
        name='OS'
        value='Android'
      />
      <RadioTile
        label='Windows'
        description='Windows phone is no longer supported'
        icon={<SvgWindows />}
        disabled
        name='OS'
        value='Windows'
      />
    </RadioTileGroup>
  );
};

Usage

The example below is the condensed version of the radio tiles. They contain only a label and an icon (the icon is optional but recommended if using condensed). If you do not need descriptive text, go with the condensed radio tiles to save space.

Disabled radio tiles can coexit with active tile. A selected tile can also take on the disabled state.

 
import * as React from 'react';
import { RadioTileGroup, RadioTile } from '@itwin/itwinui-react';

export default () => {
  return (
    <RadioTileGroup className='demo-radio-tile-group'>
      <RadioTile
        label='Google Maps'
        icon={
          <svg aria-hidden='true' viewBox='0 0 24 24'>
            <path
              d='m12 0a7.98189 7.98189 0 0 0 -6.9688 11.906c.1079.192.221.381.3438.563l6.625 11.531 6.625-11.531c.102-.151.19-.311.281-.469l.063-.094a7.98217 7.98217 0 0 0 -6.969-11.906zm0 4a4 4 0 1 1 -4 4 4.00011 4.00011 0 0 1 4-4z'
              fill='#e74c3c'
            />
            <path
              d='m12 3a5 5 0 1 0 5 5 5 5 0 0 0 -5-5zm0 2a3 3 0 1 1 -3 3 2.99988 2.99988 0 0 1 3-3z'
              fill='#c0392b'
            />
          </svg>
        }
        name='map'
        value='Google Maps'
      />
      <RadioTile
        label='Bentley Blue'
        icon={
          <svg aria-hidden='true' viewBox='0 0 24 24'>
            <path
              d='m12 0a8.12188 8.12188 0 0 0 -8.18182 7.95c0 1.8 1.235 4.65 3.55066 8.85 1.698 3 4.6311 7.2 4.6311 7.2s2.93308-4.35 4.63122-7.35c2.31571-4.2 3.55066-7.05 3.55066-8.85a8.09618 8.09618 0 0 0 -8.18188-7.8z'
              fill='#fff'
            />
            <path
              d='m12 1.10962a7.05246 7.05246 0 0 0 -7.0722 6.84038c0 1.88313 1.8238 5.43244 3.41275 8.31426 1.06435 1.88039 2.649 4.27827 3.64493 5.75084.99723-1.518 2.60183-4.00688 3.68-5.91171 1.58292-2.87099 3.40672-6.42031 3.40672-8.30339a6.98162 6.98162 0 0 0 -7.0722-6.69038zm.002 9.79947a3.27273 3.27273 0 1 1 3.27272-3.27273 3.27268 3.27268 0 0 1 -3.27272 3.27273z'
              fill='#6ab9ec'
            />
          </svg>
        }
        name='map'
        value='Bentley Blue'
        defaultChecked
      />
      <RadioTile
        label='Bentley Green'
        icon={
          <svg aria-hidden='true' viewBox='0 0 24 24'>
            <path
              d='m12 0a8.12188 8.12188 0 0 0 -8.18182 7.95c0 1.8 1.235 4.65 3.55066 8.85 1.698 3 4.6311 7.2 4.6311 7.2s2.93308-4.35 4.63122-7.35c2.31571-4.2 3.55066-7.05 3.55066-8.85a8.09618 8.09618 0 0 0 -8.18188-7.8z'
              fill='#fff'
            />
            <path
              d='m12 1.10962a7.05246 7.05246 0 0 0 -7.0722 6.84038c0 1.88313 1.8238 5.43244 3.41275 8.31426 1.06435 1.88039 2.649 4.27827 3.64493 5.75084.99723-1.518 2.60183-4.00688 3.68-5.91171 1.58292-2.87099 3.40672-6.42031 3.40672-8.30339a6.98162 6.98162 0 0 0 -7.0722-6.69038zm.002 9.79947a3.27273 3.27273 0 1 1 3.27272-3.27273 3.27268 3.27268 0 0 1 -3.27272 3.27273z'
              fill='#b1c854'
            />
          </svg>
        }
        name='map'
        value='Bentley Green'
      />
      <RadioTile
        label='Bentley Purple'
        icon={
          <svg aria-hidden='true' viewBox='0 0 24 24'>
            <path
              d='m12 0a8.12188 8.12188 0 0 0 -8.18182 7.95c0 1.8 1.235 4.65 3.55066 8.85 1.698 3 4.6311 7.2 4.6311 7.2s2.93308-4.35 4.63122-7.35c2.31571-4.2 3.55066-7.05 3.55066-8.85a8.09618 8.09618 0 0 0 -8.18188-7.8z'
              fill='#fff'
            />
            <path
              d='m12 1.10962a7.05246 7.05246 0 0 0 -7.0722 6.84038c0 1.88313 1.8238 5.43244 3.41275 8.31426 1.06435 1.88039 2.649 4.27827 3.64493 5.75084.99723-1.518 2.60183-4.00688 3.68-5.91171 1.58292-2.87099 3.40672-6.42031 3.40672-8.30339a6.98162 6.98162 0 0 0 -7.0722-6.69038zm.002 9.79947a3.27273 3.27273 0 1 1 3.27272-3.27273 3.27268 3.27268 0 0 1 -3.27272 3.27273z'
              fill='#A3779F'
            />
          </svg>
        }
        disabled
        name='map'
        value='Bentley Purple'
      />
    </RadioTileGroup>
  );
};

Highly recommend one radio tile group per page as it is visually heavy and consumes a lot of space. For accessibility reasons, avoid displaying just an icon with no accompanying text.

Props

Prop Description Default
icon
Icon to be used.
Element
label
Label of the Radio tile.
ReactNode
description
Additional description, if needed.
ReactNode
wrapperProps
Passes props to tile wrapper.
DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>
iconProps
Passes props to tile icon.
DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
labelProps
Passes props to tile label.
DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
subLabelProps
Passes props to tile sublabel.
DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
as
"symbol" | "object" | "input" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 159 more ... | FunctionComponent<...>
Edit this page on GitHub Provide feedback on GitHub