Radio buttons and keyboard use

Operation

TAB to focus on radio options
Focus appears on first radio option
Focus AND check radio buttons using ARROW keys
Right and down ARROW keys move to next radio button, back and up ARROW keys move to previous radio button.
TAB to move on to next focusable item outside radio group

Example

Code sample

<form class="example" action="#">
	<fieldset>
		<legend>Do you like apples?</legend>
		<div>
			<input type="radio" id="apples-y" name="apples">
			<label for="apples-y">Yes</label>
		</div>
		<div>
			<input type="radio" id="apples-n" name="apples">
			<label for="apples-n">No</label>
		</div>
		<div>
			<input type="radio" id="apples-m" name="apples">
			<label for="apples-m">Maybe</label>
		</div>
		<div>
			<input type="radio" id="apples-s" name="apples">
			<label for="apples-s">Sometimes</label>
		</div>
	</fieldset>
</form>

Bottom of page - Back to home