Checkbox

Checkboxes allow users to select one or more items from a set, or turn an option on or off. Follows the Material Design 3 Checkbox specification.

Usage

Open on Snack ↗

import { Checkbox } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'
import { View } from 'react-native'

export default function App() {
  const [isChecked, setIsChecked] = useState(false)
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Checkbox value={isChecked} onValueChange={setIsChecked} />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Multiple Checkboxes

Open on Snack ↗

import { Checkbox } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'
import { View } from 'react-native'

export default function App() {
  const [a, setA] = useState(true)
  const [b, setB] = useState(false)
  const [c, setC] = useState(false)
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 }}>
          <Checkbox value={a} onValueChange={setA} />
          <Checkbox value={b} onValueChange={setB} />
          <Checkbox value={c} onValueChange={setC} />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Disabled

Open on Snack ↗

import { Checkbox } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 }}>
          <Checkbox value={false} onValueChange={() => {}} disabled />
          <Checkbox value onValueChange={() => {}} disabled />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Props

Prop	Type	Default	Required	Description
value	boolean		No	Whether the checkbox is checked.
onValueChange	(value: boolean) => void	-	No	Callback fired when the checkbox is toggled. Receives the new value.
checkIcon	IconSource	check	No	Icon shown when the checkbox is checked. Accepts a string name (resolved via the theme's `iconResolver`, defaulting to `MaterialCommunityIcons`), a pre-rendered element, or a render function that receives `{ size, color }`. Override this when your `iconResolver` doesn't map the default `'check'` name (e.g. a Lucide-only resolver).
containerColor	string	-	No	Override the container (box) color when checked. State-layer colors (hover, press) are derived automatically.
contentColor	string	-	No	Override the checkmark icon color.
style	StyleProp<ViewStyle>	-	No	Style applied to the root container. Static form only — the function form `(state) => style` is not supported because the component drives its container background through Reanimated. Use `containerColor` / `contentColor` for state-aware styling.
onKeyDown	(event: { nativeEvent: { key?: string; }; }) => void	-	No	-