Form fields

Every field on this page is the app’s real component. Type in them, pick from them and clear them.

Anatomy: the shared look

Part	Value
Fill	White (near-black in dark mode)
Border	1px Green Dark, bright teal in dark mode. Red once a required field is submitted empty
Corners	15px
Padding	16px all round
Text	Body 1 (16px)
Label	Body 2 (14px, semibold), only 2px above its field
Required	A red asterisk after the label. On a teal card it’s the pale tint instead, because red looks muddy there
Placeholder	The field’s own text colour at half strength, so it always reads as empty
Focus ring	A soft green ring while the field has focus. How’s date-and-time box rings as a whole

Not every field agrees on the border: Date and Notes use plain Green, while the rest use Green Dark. It’s a small real difference in the code, not a rule.

Text field

A label, an optional hint underneath it, and the field. invalid turns the border red.

Character counter

Sits under a field with a limit. Empty, it says “Up to 30 characters”. Then it counts down. It turns coral at 3 characters left or fewer. The colour stays the same whether you’re nearly full or at the limit; only the wording changes.

Select and Combobox

Field	When to use	Real examples
Select	A short, fixed list	Document type on Docs & Tix
Combobox	A long list. Type to filter it	Country and city on Where, and when creating a jaunt

• Both open a list in the same white card with the same border. The chevron turns upside down while it’s open.
• The first item in a Select is the placeholder itself, so you can go back to “nothing chosen”.
• Combobox sorts its list A to Z and filters to items that start with what you type. Clearing the text clears the choice.

Date and time

Tapping a date field opens the Calendar or Month range modal. Tapping the time field opens the Time wheel. The coral icon on the right shows which.

Field	Shows
Date range	“Oct 19 - Oct 22”
Month range	“Oct 2026 - Dec 2026”
Single day	“19/10/2026”
Time	“14:30”, or “–:–” when empty

Phone number

A country code and the number, side by side. It’s one shared component behind every phone number in the app: sign in, sign up, Account, and adding or editing a member on Who. Who only offers the UK.

Notes

Starts one line tall and grows smoothly as you type, so it never scrolls inside itself. A coral × appears on the right to clear it.

Cover photo picker

A photo is required to create a jaunt, so the picker offers stock photos next to “upload your own”.

1. Nothing picked: a row with the upload tile first, then the stock photos.
2. Browsing: tapping a photo previews it above the row. Set confirms it.
3. Picked: the photo fills a square with a coral × badge in the corner, to change it.

Uploading your own photo needs the app’s server, so it doesn’t work in the docs. The stock photos do.

Photo upload

The one upload frame behind your avatar (a circle) and a jaunt’s cover (a square with rounded corners). Its coral badge pokes half outside the top-right corner on purpose.

• No photo: the badge is a +, and tapping it opens the file picker straight away.
• With a photo: the badge is an ×, and tapping it opens a small sheet: Remove and Change side by side, Cancel below. Nothing is removed straight away, and Remove still asks “Remove this photo?” first.
• While it uploads, the loading bar shows over the photo.

Uploading needs the app’s server, so picking a file doesn’t work in the docs.

Do and don’t

Short list: Select. Long list: Combobox

✓

✕

Select a country

A Combobox lets people type to find one of many (countries). A Select is for a handful of fixed choices.

Dates and times use Jaunt's pickers

✓

Select your dates

✕

Not the phone's own date or time input: those look out of place. Use the Date and Time fields, which open Jaunt's modals.

Accessibility

• Every text field is linked to its label, so tapping the label focuses the field and screen readers read the label.
• Combobox is fully accessible: it announces the list, the highlighted option and whether it’s open, and works with the arrow keys and Enter.
• Select works with the keyboard (arrows, Enter, Escape) and shows a focus ring.
• A required field is marked with an asterisk and, once submitted empty, a red border.
• Every field shows the same focus ring, so it’s always clear where you are.

Source

• src/web/components/Input.tsx, WithLabel.tsx, Label.tsx, CharCounter.tsx
• src/web/components/SelectField.tsx, ComboboxField.tsx
• src/web/components/DateField.tsx, TimeField.tsx
• src/web/components/PhoneNumberField.tsx
• src/web/components/NotesField.tsx
• src/web/components/JauntImageField.tsx, ImageUpload.tsx