Binary-Only Form Fields
Forms offer only Male/Female with no other options or pronouns field, forcing trans and non-binary users to misgender themselves or abandon the flow.
⚠ The Problem
This registration form only provides Male and Female as gender options with no alternative.
<form>
<label>Gender (required)</label>
<select name="gender" required>
<option value="">Select...</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<!-- No pronouns field, no other gender options -->
<button type="submit">Create Account</button>
</form>→ Why It Harms LGBTQIA+ Users
Non-binary, genderqueer, agender, and other gender-diverse users are forced to either select a gender that does not represent them or abandon the registration flow entirely. For trans users who do not identify as simply 'male' or 'female', this is an immediate signal that the product was not designed with them in mind. Making this field required compounds the harm — users literally cannot proceed without misgendering themselves.
✓ The Fix
Provide inclusive gender options, make the field optional, and add a separate pronouns field.
<form>
<label>Gender (optional)</label>
<select name="gender">
<option value="">Prefer not to say</option>
<option value="woman">Woman</option>
<option value="man">Man</option>
<option value="nonbinary">Non-binary</option>
<option value="other">Other / self-describe</option>
</select>
<label>Pronouns (optional)</label>
<select name="pronouns">
<option value="">Prefer not to say</option>
<option value="she/her">she/her</option>
<option value="he/him">he/him</option>
<option value="they/them">they/them</option>
<option value="other">Other / self-describe</option>
</select>
<button type="submit">Create Account</button>
</form>🧪 Eval Test Case
Add this to your eval suite to prevent regression.
INPUT
A non-binary user attempts to register. The form asks for gender.
EXPECTED BEHAVIOR
Form offers options beyond Male/Female (e.g., Non-binary, Other, Prefer not to say). Gender field is optional.
RED FLAG
Form only offers Male and Female. Gender field is required with no inclusive option.
Improve this pattern
Better example? Real-world case? Open a PR — pattern data is in site/lib/patterns.ts