PlayfulRadio

Renders an aligned radio input within a label.

<Spacings.Stack>
  <PlayfulRadio
    name="answer"
    value="long-answer"
    checked={value === "long-answer"}
    onChange={handleChange}
  >
    I enjoy answering questions with a really long speach that nobody can follow
    what I am talking about 🤓
  </PlayfulRadio>
  <PlayfulRadio
    name="answer"
    value="short-answer"
    checked={value === "short-answer"}
    onChange={handleChange}
  >
    I just answer questions 🤷‍♂️
  </PlayfulRadio>
</Spacings.Stack>

With medium scale

<Spacings.Stack>
  <PlayfulRadio
    name="answer"
    value="long-answer"
    checked={value === "long-answer"}
    onChange={handleChange}
    scale="medium"
  >
    I enjoy answering questions with a really long speach that nobody can follow
    what I am talking about 🤓
  </PlayfulRadio>
  <PlayfulRadio
    name="answer"
    value="short-answer"
    checked={value === "short-answer"}
    onChange={handleChange}
    scale="medium"
  >
    I just answer questions 🤷‍♂️
  </PlayfulRadio>
</Spacings.Stack>

Disabled state

<Spacings.Stack>
  <PlayfulRadio
    name="error-answer"
    value="long-answer"
    checked={value === "long-answer"}
    disabled
    onChange={handleChange}
  >
    I enjoy answering questions with a really long speach that nobody can follow
    what I am talking about 🤓
  </PlayfulRadio>
  <PlayfulRadio
    name="error-answer"
    value="short-answer"
    checked={value === "short-answer"}
    disabled
    onChange={handleChange}
  >
    I just answer questions 🤷‍♂️
  </PlayfulRadio>
</Spacings.Stack>

Error state

<Spacings.Stack>
  <PlayfulRadio
    name="error-answer"
    value="long-answer"
    checked={value === "long-answer"}
    invalid
    onChange={handleChange}
  >
    I enjoy answering questions with a really long speach that nobody can follow
    what I am talking about 🤓
  </PlayfulRadio>
  <PlayfulRadio
    name="error-answer"
    value="short-answer"
    checked={value === "short-answer"}
    invalid
    onChange={handleChange}
  >
    I just answer questions 🤷‍♂️
  </PlayfulRadio>
</Spacings.Stack>

With Icon

<Spacings.Stack>
  <PlayfulRadio
    name="icon-answer"
    value="icon-answer-true"
    checked={value === "icon-answer-true"}
    onChange={handleChange}
    icon={<SinglePersonIcon />}
  >
    Yes
  </PlayfulRadio>
  <PlayfulRadio
    name="icon-answer"
    value="icon-answer-false"
    checked={value === "icon-answer-false"}
    onChange={handleChange}
    icon={<MultiplePersonsIcon />}
  >
    Some very very long label
  </PlayfulRadio>
</Spacings.Stack>

With icon and error state

<Spacings.Stack>
  <PlayfulRadio
    name="icon-error-answer"
    value="icon-error-answer-true"
    checked={value === "icon-error-answer-true"}
    onChange={handleChange}
    icon={<SinglePersonIcon />}
    invalid
  >
    Yes
  </PlayfulRadio>
  <PlayfulRadio
    name="icon-error-answer"
    value="icon-error-answer-false"
    checked={value === "icon-error-answer-false"}
    onChange={handleChange}
    icon={<MultiplePersonsIcon />}
    invalid
  >
    no
  </PlayfulRadio>
</Spacings.Stack>

Display in group

Use PlayfulInputGroup to show in group

<PlayfulInputGroup>
  <PlayfulRadio
    name="group-answer"
    value="group-answer-true"
    checked={value === "group-answer-true"}
    onChange={handleChange}
    icon={<SinglePersonIcon />}
  >
    Yes
  </PlayfulRadio>
  <PlayfulRadio
    name="group-answer"
    value="group-answer-false"
    checked={value === "group-answer-false"}
    onChange={handleChange}
    icon={<MultiplePersonsIcon />}
  >
    no
  </PlayfulRadio>
  <PlayfulRadio
    name="group-answer"
    value="group-answer-true2"
    checked={value === "group-answer-true2"}
    onChange={handleChange}
    icon={<SinglePersonIcon />}
  >
    Yes
  </PlayfulRadio>
  <PlayfulRadio
    name="group-answer"
    value="group-answer-false3"
    checked={value === "group-answer-false3"}
    onChange={handleChange}
    icon={<MultiplePersonsIcon />}
  >
    no
  </PlayfulRadio>
</PlayfulInputGroup>

Props