react-gender-input

A simple react component for more inclusive gender data collection

Usage no npm install needed!

<script type="module">
  import reactGenderInput from 'https://cdn.skypack.dev/react-gender-input';
</script>

README

react-gender-input

A better gender form option implemeted as a react component

NPM Version Build Status License

Demo

View the component in action in our interactive demo

Installation

Use yarn or npm to install react-gender-input

yarn add react-gender-input or npm install --save react-gender-input

Usage

import { GenderInput } from 'react-gender-input';

<GenderInput
    name='my-gender-field-name'
    onUpdate={(val) => {...}}
    value={user.gender}
/>

Options

  • name: type: string, default: gender-input. Form name property used for the input
  • value: type: string. Selected gender value
  • required: type boolean, default: false. Toggles `required="required" on form inputsVY
  • preferNotToSay: type boolean, default: true. Toggles an additional "Prefer not to say option"
  • otherReveal: type 'select' | false, default: select. Defines form input that is revealed on selecting "Other"
  • onUpdate: type function. Method to call when the selected value changes. Called with one argument: the new value.