PlayfulCheckbox

Renders an aligned checkbox input within a label.

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

With medium scale

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

Disabled state

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

Error state

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

With Icon

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

With Icon and medium scale

<Spacings.Stack>
  <PlayfulCheckbox
    name="icon-answer"
    value="icon-answer-true"
    icon={<SinglePersonIcon />}
    scale="medium"
  >
    Yes
  </PlayfulCheckbox>
  <PlayfulCheckbox
    name="icon-answer"
    value="icon-answer-false"
    icon={<MultiplePersonsIcon />}
    scale="medium"
  >
    Some very very long label
  </PlayfulCheckbox>
</Spacings.Stack>

With icon and error state

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

Display in group

Use PlayfulInputGroup to show in group

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

With leanCheckboxOptions

This option will remove the background and padding. Typically used for user consent fields such as a privacy policy.

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

Props