---
name: TileSelector
menu: UI Kit
---

import { Playground, PropsTable } from "docz";
import Container from "react-with-state-props";

import TileSelector from "./TileSelector";
import TileOption from "./TileOption";
import HorizontalGutter from "../HorizontalGutter";
import Icon from "../Icon";

# TileSelector

## Basic Use

<Playground>
  <Container
    state={{ value: null }}
    render={props => (
      <TileSelector
        id="icon"
        name="icon"
        onChange={val => props.setValue(val)}
        value={props.value}
      >
        <TileOption value="question_answer">
          <Icon size="md">question_answer</Icon>
        </TileOption>
        <TileOption value="today">
          <Icon size="md">today</Icon>
        </TileOption>
        <TileOption value="help_outline">
          <Icon size="md">help_outline</Icon>
        </TileOption>
        <TileOption value="warning">
          <Icon size="md">warning</Icon>
        </TileOption>
        <TileOption value="chat_bubble_outline">
          <Icon size="md">chat_bubble_outline</Icon>
        </TileOption>
        <TileOption value="">No Icon</TileOption>
      </TileSelector>
    )}
  />
</Playground>
