Skip to content

Instantly share code, notes, and snippets.

@srph
Created April 2, 2016 13:19
Show Gist options
  • Save srph/bb9f8990768262bb00683ad194867da1 to your computer and use it in GitHub Desktop.
Save srph/bb9f8990768262bb00683ad194867da1 to your computer and use it in GitHub Desktop.
react: gender input select
import React from 'react';
const GenderInputSelect = (props) =>
<select {...props}>
<option>Select gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
export default GenderInputSelect;
@Vaisakhkm2625
Copy link

More inclusive gender input

import React from 'react';

const GenderInputSelect = (props) =>
  <select {...props}>
    <option>Select gender</option>
    <option value="acault-(myanmar)">acault (myanmar)</option>
    <option value="afab">afab</option>
    <option value="agender">agender</option>
    <option value="aliagender">aliagender</option>
    <option value="alyha-and-hwame-(mohave)">alyha and hwame (mohave)</option>
    <option value="amab">amab</option>
    <option value="androgynous">androgynous</option>
    <option value="aporagender">aporagender</option>
    <option value="aravani-(india)">aravani (india)</option>
    <option value="ashtime-(maale-ethiopia)">ashtime (maale ethiopia)</option>
    <option value="burrnesha-(albania)">burrnesha (albania)</option>
    <option value="bakla">bakla</option>
    <option value="bigender">bigender</option>
    <option value="calabai-calalai-and-bissu-(indonesia)">calabai calalai and bissu (indonesia)</option>
    <option value="chuckchi-ne’uchika-shamans-(siberia)">chuckchi ne’uchika shamans (siberia)</option>
    <option value="cisgender">cisgender</option>
    <option value="cis-female">cis female</option>
    <option value="cis-male">cis male</option>
    <option value="demiboy">demiboy</option>
    <option value="demigender">demigender</option>
    <option value="demigirl">demigirl</option>
    <option value="fa’afafine">fa’afafine</option>
    <option value="fakaleiti">fakaleiti</option>
    <option value="female">female</option>
    <option value="femme">femme</option>
    <option value="femminiello-(italy)">femminiello (italy)</option>
    <option value="guevedoche-(dominican-republic)">guevedoche (dominican republic)</option>
    <option value="femminiello">femminiello</option>
    <option value="ftm">ftm</option>
    <option value="gender-apathetic">gender apathetic</option>
    <option value="gender-fluid">gender fluid</option>
    <option value="gender-neutral">gender neutral</option>
    <option value="gender-nonconforming">gender nonconforming</option>
    <option value="gender-questioning">gender questioning</option>
    <option value="gender-variant">gender variant</option>
    <option value="genderqueer">genderqueer</option>
    <option value="hermaphrodite">hermaphrodite</option>
    <option value="hijra-(kinnar)">hijra (kinnar)</option>
    <option value="intergender">intergender</option>
    <option value="intersex">intersex</option>
    <option value="kathoey">kathoey</option>
    <option value="lhamana-(zuni)">lhamana (zuni)</option>
    <option value="mahu-(hawaii)">mahu (hawaii)</option>
    <option value="male">male</option>
    <option value="maverique">maverique</option>
    <option value="metis-(nepal)">metis (nepal)</option>
    <option value="mtf-(male-to-female)">mtf (male-to-female)</option>
    <option value="muxe-(mexico)">muxe (mexico)</option>
    <option value="neither">neither</option>
    <option value="neutrois">neutrois</option>
    <option value="ninauposkitzipxpe-(blackfoot)">ninauposkitzipxpe (blackfoot)</option>
    <option value="nadleehi-and-dilbaa-(navajo)">nadleehi and dilbaa (navajo)</option>
    <option value="non-binary">non-binary</option>
    <option value="novigender">novigender</option>
    <option value="other">other</option>
    <option value="paṇḍaka">paṇḍaka</option>
    <option value="pangender">pangender</option>
    <option value="polygender">polygender</option>
    <option value="quariwarmi-(inca-peru)">quariwarmi (inca peru)</option>
    <option value="sekrata-(madagascar)">sekrata (madagascar)</option>
    <option value="sistergirl-and-brotherboy-(aboriginal-australian)">sistergirl and brotherboy (aboriginal australian)</option>
    <option value="brotherboy-(aboriginal-australia)">brotherboy (aboriginal australia)</option>
    <option value="third-gender">third gender</option>
    <option value="tom-and-dee-identities">tom and dee identities</option>
    <option value="trans">trans</option>
    <option value="transmasculine">transmasculine</option>
    <option value="trans-man">trans man</option>
    <option value="trans-woman">trans woman</option>
    <option value="transfeminine">transfeminine</option>
    <option value="transsexual">transsexual</option>
    <option value="transsexual-female">transsexual female</option>
    <option value="transsexual-male">transsexual male</option>
    <option value="travesti">travesti</option>
    <option value="trigender">trigender</option>
    <option value="two-spirit">two-spirit</option>
    <option value="two-spirit-female">two-spirit female</option>
    <option value="two-spirit-male">two-spirit male</option>
    <option value="waria-(indonesia)">waria (indonesia)</option>
    <option value="whakawahine-(new-zealand)">whakawahine (new zealand)</option>
    <option value="winkte-(lakota)">winkte (lakota)</option>
    <option value="xanith-(oman)">xanith (oman)</option>
  </select>

export default GenderInputSelect;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment