GitHub
FormsSelect

Select

The <Select /> element represents a dropdown menu for the selection of predefined options.

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

const field = { height: 18, borderWidth: 1, borderColor: '#c9c2b6' };
const label = { fontSize: 9, color: '#3e3e3e', marginBottom: 4 };

const Country = () => (
  <View>
    <Text style={label}>Country</Text>
    <Select
      name="country"
      select={['Argentina', 'Japan', 'Kenya']}
      value="Argentina"
      style={field}
    />
  </View>
);
Show preview

Valid props

Prop nameDescriptionTypeDefault
editIf set to true allows the user to enter a value in the fieldBooleanfalse
noSpellIf set to true and edit is set to true it tells the pdf viewer to not spellcheck the textBooleanfalse

For more attributes head to Select and List Attributes.

On this page