Skip to content

Add required field indicators to forms #653

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eicyer wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add required field indicators to forms #653

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac3ecd2
Add visual indicators to required form fields across the application to
eicyer Jan 5, 2026
47a4e7a
Merge remote-tracking branch 'origin/master' into required-elements
eicyer Jan 9, 2026
fafcb66
Update Employee modal components
eicyer Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions frontend/src/components/EmployeeModal/EmployeeInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const EmployeeInfo = ({
return (
<div className={styles.inputContainer}>
<div className={styles.col1}>
<Label htmlFor="firstName">First Name</Label>
<Label htmlFor="firstName" required>First Name</Label>
<Input
id="firstName"
type="text"
Expand All @@ -41,7 +41,7 @@ const EmployeeInfo = ({
)}
</div>
<div className={styles.col2}>
<Label htmlFor="lastName">Last Name</Label>
<Label htmlFor="lastName" required>Last Name</Label>
<Input
id="lastName"
type="text"
Expand All @@ -55,7 +55,7 @@ const EmployeeInfo = ({
)}
</div>
<div className={styles.col1}>
<Label htmlFor="netid">NetID</Label>
<Label htmlFor="netid" required>NetID</Label>
<Input
id="netid"
type="text"
Expand All @@ -69,7 +69,7 @@ const EmployeeInfo = ({
)}
</div>
<div className={styles.col2}>
<Label htmlFor="phoneNumber">Phone Number</Label>
<Label htmlFor="phoneNumber" required>Phone Number</Label>

@anika-4444 anika-4444 Jan 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a huge deal but this message repeats itself when there is an error
image

<Input
id="phoneNumber"
type="tel"
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/EmployeeModal/StartDate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const StartDate = ({ existingDate }: StartDateProps) => {

return (
<div className={cn(styles.col1, styles.workingHours)}>
<Label htmlFor="startDate">Start Date:</Label>
<Label htmlFor="startDate" required>Start Date:</Label>
<Input
id="startDate"
type="date"

@anika-4444 anika-4444 Jan 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I saw someone make a comment about this but I can't remember where or when (so please ignore if this has already been dealt with) but should we also make selecting a role mandatory in this modal?

Expand Down
20 changes: 13 additions & 7 deletions frontend/src/components/FormElements/FormElements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,19 @@ import {
type LabelType = React.DetailedHTMLProps<
React.LabelHTMLAttributes<HTMLLabelElement>,
HTMLLabelElement
>;
> & {
required?: boolean;
};

export const Label = ({ className, children, ...props }: LabelType) => (
<label {...props} className={cn(styles.label, className)}>
{children}
</label>
);
export const Label = ({ className, children, required, ...props }: LabelType) => {
console.log('Label required:', required); // Debug line
return (
<label {...props} className={cn(styles.label, className)}>
{children}
{required && <span className={styles.requiredIndicator}> *</span>}
</label>
);
};

// This should only be used when you don't want a label to visually appear on screen
// Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
Expand Down Expand Up @@ -78,7 +84,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
ref={ref}
onClick={disabled ? undefined : onClick} // Disable click handler if disabled
disabled={disabled}
// onClick={onClick}
// onClick={onClick}
>
{children}
</button>
Expand Down
16 changes: 15 additions & 1 deletion frontend/src/components/FormElements/formelements.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,21 +53,25 @@
border: 0.063rem solid #000000;
box-sizing: border-box;
}

.primaryBtn:focus {
box-shadow: 0 0 0 3px #0075db;
}

.secondaryBtn {
background-color: white;
border: 0.063rem solid #000000;
box-sizing: border-box;
}

.secondaryBtn:focus {
box-shadow: 0 0 0 3px #0075db;
}

.srlabel {
border: 0;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
Expand All @@ -76,6 +80,7 @@
position: absolute;
width: 1px;
}

::-webkit-input-placeholder {
color: #767676;
opacity: 1;
Expand All @@ -97,3 +102,12 @@
color: #767676;
opacity: 1;
}

.requiredIndicator {
color: #eb0023 !important;
/* Force red color */
font-weight: bold;
font-size: 1.1em;
margin-left: 3px;
display: inline-block;
}
8 changes: 4 additions & 4 deletions frontend/src/components/LocationModal/LocationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const LocationModal: React.FC<LocationModalProps> = ({
aria-labelledby="location-modal"
>
<div className={styles.inputContainer}>
<Label htmlFor="name">Name</Label>
<Label htmlFor="name" required>Name</Label>
<Input
{...register('name', { required: true })}
type="text"
Expand All @@ -128,7 +128,7 @@ const LocationModal: React.FC<LocationModalProps> = ({
<p className={styles.errorMsg}>Please enter a name</p>
)}

<Label htmlFor="address">Address</Label>
<Label htmlFor="address" required>Address</Label>
<Input
{...register('address', { required: true, validate: isAddress })}
type="text"
Expand All @@ -141,7 +141,7 @@ const LocationModal: React.FC<LocationModalProps> = ({
<p className={styles.errorMsg}>{errors.address.message}</p>
)}

<Label htmlFor="info">Pickup/Dropoff Info</Label>
<Label htmlFor="info" required>Pickup/Dropoff Info</Label>
<Input
{...register('info', { required: true })}
type="text"
Expand All @@ -156,7 +156,7 @@ const LocationModal: React.FC<LocationModalProps> = ({
</p>
)}

<Label htmlFor="tag">Tag</Label>
<Label htmlFor="tag" required>Tag</Label>
<select
{...register('tag', { required: true })}
id="tag"
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/components/Modal/RiderModalInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
<form onSubmit={handleSubmit(beforeSubmit)} className={styles.form}>
<div className={cn(styles.inputContainer, styles.rideTime)}>
<div className={cn(styles.gridR1, styles.gridCSmall1)}>
<Label className={styles.label} htmlFor="name">
<Label className={styles.label} htmlFor="name" required>
Name:{' '}
</Label>
<Input
Expand All @@ -196,7 +196,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
</div>

<div className={cn(styles.gridR1, styles.gridCSmall2)}>
<Label className={styles.label} htmlFor="netid">
<Label className={styles.label} htmlFor="netid" required>
NetID:{' '}
</Label>
<Input
Expand All @@ -216,7 +216,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
</div>

<div className={cn(styles.gridR1, styles.gridCSmall3)}>
<Label className={styles.label} htmlFor="phoneNumber">
<Label className={styles.label} htmlFor="phoneNumber" required>
Phone Number:{' '}
</Label>
<Input
Expand All @@ -235,7 +235,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
</div>

<div className={cn(styles.gridR2, styles.gridCBig1)}>
<Label className={styles.label} htmlFor="needs">
<Label className={styles.label} htmlFor="needs" required>
Needs:{' '}
</Label>
<div className={styles.needsContainer}>
Expand Down Expand Up @@ -300,7 +300,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
</div>

<div className={cn(styles.gridR2, styles.gridCBig2)}>
<Label className={styles.label} htmlFor="address">
<Label className={styles.label} htmlFor="address" required>
Address:{' '}
</Label>
<Input
Expand All @@ -322,7 +322,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
<p>Duration</p>
<div className={styles.lastRow}>
<div>
<Label className={styles.label} htmlFor="joinDate">
<Label className={styles.label} htmlFor="joinDate" required>
Join Date:{' '}
</Label>
<Input
Expand All @@ -341,7 +341,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
<p>→</p>
</div>
<div>
<Label className={styles.label} htmlFor="endDate">
<Label className={styles.label} htmlFor="endDate" required>
End Date:{' '}
</Label>
<Input
Expand Down
20 changes: 10 additions & 10 deletions frontend/src/components/RequestRideModal/RequestRideInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,13 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
{((modalType === 'CREATE' && watchRepeating) ||
modalType === 'EDIT_REGULAR' ||
modalType === 'EDIT_SINGLE_RECURRING') && (
<Label htmlFor={'startDate'} className={styles.largeLabel}>
Date
</Label>
)}
<Label htmlFor={'startDate'} className={styles.largeLabel} required>
Date
</Label>
)}
<div className={styles.box}>
{modalType === 'EDIT_ALL_RECURRING' && (
<Label className={styles.boldLabel} htmlFor="startDate">
<Label className={styles.boldLabel} htmlFor="startDate" required>
Starts
</Label>
)}
Expand Down Expand Up @@ -194,7 +194,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
{showRepeatingInfo && watchRepeating ? (
<div>
<div className={styles.box}>
<Label className={styles.boldLabel} id="repeats">
<Label className={styles.boldLabel} id="repeats" required>
Repeats
</Label>
<div className={styles.radioBox}>
Expand Down Expand Up @@ -278,7 +278,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
</Label>
<div className={styles.box}>
<div className={styles.errorBox}>
<Label className={styles.label} id="pickupLocation">
<Label className={styles.label} id="pickupLocation" required>

@anika-4444 anika-4444 Jan 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note for the future: Once my PR editing the way custom locations (regular text field instead of an address picker) are dealt with is merged, this component is going to look slightly different. We should make sure the required indicators still work correctly once this happens.

Location
</Label>
<select
Expand Down Expand Up @@ -307,7 +307,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
)}
</div>
<div className={styles.errorBox}>
<Label className={styles.label} id="pickupTime">
<Label className={styles.label} id="pickupTime" required>
Time
</Label>
<Input
Expand Down Expand Up @@ -383,7 +383,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
</Label>
<div className={styles.box}>
<div className={styles.errorBox}>
<Label className={styles.label} id="dropoffLocation">
<Label className={styles.label} id="dropoffLocation" required>
Location
</Label>
<select
Expand Down Expand Up @@ -413,7 +413,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
)}
</div>
<div className={styles.errorBox}>
<Label className={styles.label} id="dropoffTime">
<Label className={styles.label} id="dropoffTime" required>
Time
</Label>
<Input
Expand Down
36 changes: 18 additions & 18 deletions frontend/src/components/RiderComponents/RequestRideDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -430,12 +430,12 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({

const handleDateChange =
(field: keyof Pick<FormData, 'date' | 'time' | 'repeatEndDate'>) =>
(newDate: Date | null) => {
setFormData({
...formData,
[field]: newDate,
});
};
(newDate: Date | null) => {
setFormData({
...formData,
[field]: newDate,
});
};

const handleRepeatTypeChange = (
event: React.ChangeEvent<HTMLInputElement>
Expand Down Expand Up @@ -493,7 +493,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
finalDropoff !== null &&
finalPickup !== null &&
normalizeAddress(finalDropoff?.address) ===
normalizeAddress(finalPickup.address)
normalizeAddress(finalPickup.address)
) {
setInputPickUpError(true);
setInputDropOffError(true);
Expand Down Expand Up @@ -588,8 +588,8 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
backgroundColor: formData.pickupLocation
? '#4caf50'
: selectionState === 'pickup'
? '#2196f3'
: '#e0e0e0',
? '#2196f3'
: '#e0e0e0',
color: 'white',
fontSize: '12px',
}}
Expand All @@ -603,8 +603,8 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
backgroundColor: formData.dropoffLocation
? '#4caf50'
: selectionState === 'dropoff'
? '#2196f3'
: '#e0e0e0',
? '#2196f3'
: '#e0e0e0',
color: 'white',
fontSize: '12px',
}}
Expand Down Expand Up @@ -691,8 +691,8 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
Or select from dropdown:
</h4>

<FormControl fullWidth style={{ marginBottom: '16px' }}>
<InputLabel>Pickup Location</InputLabel>
<FormControl fullWidth required style={{ marginBottom: '16px' }}>
<InputLabel required>Pickup Location</InputLabel>
<Select<string>
value={formData.pickupLocation?.id || ''}
onChange={(event) => {
Expand Down Expand Up @@ -744,8 +744,8 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
</div>
)}

<FormControl fullWidth>
<InputLabel>Drop-off Location</InputLabel>
<FormControl fullWidth required>
<InputLabel required>Drop-off Location</InputLabel>
<Select<string>
value={formData.dropoffLocation?.id || ''}
disabled={!formData.pickupLocation} //makes ensuring start and end locations are different simpler
Expand Down Expand Up @@ -808,7 +808,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Stack direction="row" spacing={2}>
<DatePicker
label="Date"
label="Date *"
value={formData.date}
onChange={handleDateChange('date')}
slotProps={{
Expand All @@ -818,7 +818,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
}}
/>
<TimePicker
label="Time"
label="Time *"
value={formData.time}
onChange={handleDateChange('time')}
slotProps={{
Expand Down Expand Up @@ -850,7 +850,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
{formData.repeatType !== 'none' && (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Repeat End Date"
label="Repeat End Date *"
value={formData.repeatEndDate}
onChange={handleDateChange('repeatEndDate')}
slotProps={{
Expand Down
Loading