# Examples

## Basic Usage

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><img src="https://1395252454-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkTHdV5N8ZpjBiQlYESm4%2Fuploads%2FtStoeOdBQv4qciM5OWm3%2FB49F3E01-790B-4102-AFF8-0565CC99694B_1_201_a.jpeg?alt=media&#x26;token=88690ada-5231-497d-9483-194720474ca5" alt="" data-size="original"></td><td><p></p><pre class="language-jsx"><code class="lang-jsx">&#x3C;CheckBox
  isChecked={isChecked}
  checkColor="#eef3ff"
  fillColor="#3d3aff"
  fillMode={true}
  borderRadius={7}
  animationType="bouncy"
  onPress={handleToggle}
/>
</code></pre></td><td></td></tr><tr><td><img src="https://1395252454-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkTHdV5N8ZpjBiQlYESm4%2Fuploads%2FkkWpqYH1YDOKkk02TRSx%2FE1381072-BC88-4BA6-88E2-76841E946E22_1_201_a.jpeg?alt=media&#x26;token=11cfddf7-8d67-48e2-9d01-f39459e39c26" alt="" data-size="original"></td><td></td><td><pre class="language-jsx"><code class="lang-jsx">&#x3C;CheckBox
  isChecked={isChecked}
  checkColor="#eef3ff"
  fillColor="#1c1c1c"
  fillMode={true}
  borderRadius={20}
  onPress={handleToggle}
/>
</code></pre></td></tr><tr><td><img src="https://1395252454-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkTHdV5N8ZpjBiQlYESm4%2Fuploads%2FahrnxACqDzsGXZE3C5zo%2F53127731-F709-4488-A1D0-8FCA984D6157_1_201_a.jpeg?alt=media&#x26;token=4b40390e-d99f-4113-adc6-5d1c1ff06f5c" alt="" data-size="original"></td><td><pre class="language-jsx"><code class="lang-jsx">&#x3C;CheckBox
  isChecked={isChecked}
  borderRadius={20}
  animationType="opacity"
  onPress={handleToggle}
/>
</code></pre></td><td></td></tr></tbody></table>

## Advanced Usage

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><img src="https://1395252454-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkTHdV5N8ZpjBiQlYESm4%2Fuploads%2FJ2jbRnWI0v3JI9OLJtVY%2FFE2D21F5-07E9-4B45-BC78-7BE0D6E783B1_1_201_a.jpeg?alt=media&#x26;token=cbe39279-ee71-40fe-b381-10bffd46021b" alt="" data-size="original"></td><td></td><td></td></tr><tr><td><pre class="language-jsx"><code class="lang-jsx">&#x3C;Pressable
  style={{
    borderWidth: 1,
    width: "90%",
    padding: 16,
    borderRadius: 10,
    flexDirection: "row",
    gap: 12,
    borderColor: isChecked ? "#1c1c1c" : "lightgray",
  }}
  onPress={handleToggle}
>
  &#x3C;CheckBox
    isChecked={isChecked}
    checkColor={"lightgray"}
    fillColor={isChecked ? "#1c1c1c" : undefined}
    borderRadius={20}
    borderWidth={1.2}
    onPress={handleToggle}
  />
    &#x3C;Text style={{ letterSpacing: -0.4, fontSize: 16 }}>
      Go swimming 🏊🏻
    &#x3C;/Text>
&#x3C;/Pressable>
</code></pre></td><td></td><td></td></tr></tbody></table>
