Agriculture Design System
Beta
Design System for the Export Service

Conditionally revealed content

Conditionally reveal a question or information related to a specific radio or checkbox option when a user selects it. This ensures that users only encounter conditionally revealed content when it is applicable to their selection.

Do

  • limit what is revealed to 1 related question or piece of information
  • reveal the related question or information directly under the initial question
  • use another page if there are multiple related questions
  • only use with vertically stacked checkboxes or radios

Don’t

  • reveal more than 1 related question or piece of information
  • use with horizontally stacked checkboxes or radios
  • reveal anything that is not a question or piece of information relating directly to a specific radio or checkbox option.

Radio

You can reveal a related question or information specific to that option when users select a particular Radio, so they only see that content when it is relevant to them.

Open in Playroom, opens in a new tab
() => {
	const [value, setValue] = React.useState();
	const handlerForKey = React.useCallback((key) => () => setValue(key), []);
	const isChecked = (key) => key === value;
	return (
		<ControlGroup label="Preferred contact method" required block>
			<Radio checked={isChecked('email')} onChange={handlerForKey('email')}>
				Email
			</Radio>
			{isChecked('email') && (
				<ConditionalFieldContainer>
					<TextInput type="email" label="Email address" required />
				</ConditionalFieldContainer>
			)}
			<Radio checked={isChecked('phone')} onChange={handlerForKey('phone')}>
				Phone
			</Radio>
			{isChecked('phone') && (
				<ConditionalFieldContainer>
					<TextInput label="Phone number" inputMode="numeric" required />
				</ConditionalFieldContainer>
			)}
			<Radio
				checked={isChecked('textMessage')}
				onChange={handlerForKey('textMessage')}
			>
				Text message
			</Radio>
			{isChecked('textMessage') && (
				<ConditionalFieldContainer>
					<TextInput label="Mobile phone number" inputMode="numeric" required />
				</ConditionalFieldContainer>
			)}
		</ControlGroup>
	);
};

Checkbox

You can reveal a related question or information related to that option when a user selects a particular Checkbox, so they only see that content when it is relevant to them.

Open in Playroom, opens in a new tab
() => {
	const [value, setValue] = React.useState([]);
	const handlerForKey = React.useCallback(
		(key) => () =>
			setValue((value) =>
				value.includes(key) ? value.filter((v) => v !== key) : [...value, key]
			),
		[]
	);
	const isChecked = (key) => value.includes(key);
	return (
		<ControlGroup label="Preferred contact method" required block>
			<Checkbox checked={isChecked('email')} onChange={handlerForKey('email')}>
				Email
			</Checkbox>
			{isChecked('email') && (
				<ConditionalFieldContainer>
					<TextInput type="email" label="Email address" required />
				</ConditionalFieldContainer>
			)}
			<Checkbox checked={isChecked('phone')} onChange={handlerForKey('phone')}>
				Phone
			</Checkbox>
			{isChecked('phone') && (
				<ConditionalFieldContainer>
					<TextInput label="Phone number" inputMode="numeric" required />
				</ConditionalFieldContainer>
			)}
			<Checkbox
				checked={isChecked('textMessage')}
				onChange={handlerForKey('textMessage')}
			>
				Text message
			</Checkbox>
			{isChecked('textMessage') && (
				<ConditionalFieldContainer>
					<TextInput label="Mobile phone number" inputMode="numeric" required />
				</ConditionalFieldContainer>
			)}
		</ControlGroup>
	);
};

Invalid

When a conditionally revealed question is invalid, include an error message on the invalid field that is clearly related to the initial question.

Open in Playroom, opens in a new tab
() => {
	const [value, setValue] = React.useState('email');
	const handlerForKey = React.useCallback((key) => () => setValue(key), []);
	const isChecked = (key) => key === value;
	return (
		<ControlGroup label="Preferred contact method" required block>
			<Radio checked={isChecked('email')} onChange={handlerForKey('email')}>
				Email
			</Radio>
			{isChecked('email') && (
				<ConditionalFieldContainer>
					<TextInput
						type="email"
						label="Email address"
						required
						invalid
						message="Enter a email address"
					/>
				</ConditionalFieldContainer>
			)}
			<Radio checked={isChecked('phone')} onChange={handlerForKey('phone')}>
				Phone
			</Radio>
			{isChecked('phone') && (
				<ConditionalFieldContainer>
					<TextInput
						label="Phone number"
						inputMode="numeric"
						required
						invalid
						message="Enter a phone number"
					/>
				</ConditionalFieldContainer>
			)}
			<Radio
				checked={isChecked('textMessage')}
				onChange={handlerForKey('textMessage')}
			>
				Text message
			</Radio>
			{isChecked('textMessage') && (
				<ConditionalFieldContainer>
					<TextInput
						label="Mobile phone number"
						inputMode="numeric"
						required
						invalid
						message="Enter a mobile phone number"
					/>
				</ConditionalFieldContainer>
			)}
		</ControlGroup>
	);
};
  • Checkbox – Checkboxes allow users to select one or more options from a list.
  • Radio – Radios allow users to select one option from a list.
Edit this page