logo

eola Style Guide 2024: Checkbox

Checkbox

Checkbox is used in place of a traditional <input type="checkbox" /> element. This has formik baked into it for ease of use.

Examples

Checkbox

<Formik initialValues={{toggle: true}} onSubmit={()=>{}}>
  <Checkbox name='toggle' label={'This is a gift'} />
</Formik>
  

Content Checkbox

<Formik initialValues={{checkboxOne: ""}} onSubmit={()=>{}}>
  <ContentCheckbox name="checkboxOne">
   <Text>Sailing</Text>
  </ContentCheckbox>
</Formik>
  

Content Checkbox with Icon

<Formik initialValues={{checkboxTwo: ""}} onSubmit={()=>{}}>
  <ContentCheckbox name="checkboxTwo" label="Sailing">
    <Icon name="sailing" size={24} mr={2}/>
    <Text>Sailing</Text>
  </ContentCheckbox>
</Formik>
  

Disabled Content Checkbox with Icon

<Formik initialValues={{checkboxTwo: ""}} onSubmit={()=>{}}>
  <ContentCheckbox disabled name="checkboxTwo" label="Sailing">
    <Icon name="sailing" size={24} mr={2}/>
    <Text>Sailing</Text>
  </ContentCheckbox>
</Formik>