Use <label> HTML element for input labels

[Devessier]

Scope & Context

Many form components use labels. Most of the time, the labels are <div> elements. See:

twenty/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx

Lines 24 to 25 in 2f41e14

	const StyledLabel = styled.span`
	color: ${({ theme }) => theme.font.color.light};

twenty/packages/twenty-front/src/modules/ui/input/components/Select.tsx

Lines 57 to 58 in 2f41e14

	const StyledLabel = styled.span`
	color: ${({ theme }) => theme.font.color.light};

Sometimes, the id linking a label with an input is a UUID v4. See:

twenty/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx

Line 168 in 2f41e14

const checkboxId = 'checkbox' + v4();

Technical inputs

Labels should use the <label> HTML element for accessibility and UX concerns.

Using a UUID as a label ID is not recommended. UUIDs are cryptographically strong identifiers with low collision probability and are slow to compute. Label IDs should not be generated at each render; it's best not to change them too much to not disturb assistive technologies. We should prefer the new useId() React hook.