Checkbox

The <Checkbox /> element represents one of two states the user can toggle between. Some viewers behave differently based on wether the name prop is set or not and wether there are name duplicates or not. This can result in inconsistencies which makes the name prop recommendable to use and to achieve a consistent result across various viewers.

import { View, Text, Checkbox } from '@react-pdf/renderer';

const box = { width: 12, height: 12, borderWidth: 1, borderColor: '#c9c2b6' };
const label = { fontSize: 9, color: '#3e3e3e' };

const Consent = () => (
  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
    <Checkbox name="terms" checked style={box} />
    <Text style={label}>I accept the terms</Text>
  </View>
);

Show preview

Valid props

Prop name	Description	Type	Default
backGroundColor	It defines the color of the inside of the checkbox it applies to	String	undefined
borderColor	Defines the color used to paint the outline of the checkbox	String	undefined
checked	If set to true the checkbox is checked	Boolean	false
onState	If set to true tells the pdf viewer to not spellcheck the text	String	Yes
offState	Defines the format the textinput should be formatted to	String	No
xMark	If set to true the onState appears as a X otherwise a checkmark is displayed	Boolean	false

Valid props

On this page