Forms

Common Form Fields

Single-line Text

NOTE: Class form-required in <label> adds the red asterisk.

Multi-line Text

Fieldset

Radio Boxes

Choice 1

Choice 2

Choice 3

Checkboxes

Checkbox 1

Checkbox 2

Checkbox 3

Drop-down

<fieldset>
	<legend>Fieldset</legend>
	<div class="grid-x grid-margin-x grid-margin-y">
		<div class="cell medium-4">

			<fieldset id="radio-field" class="fieldgroup radios--wrapper form-wrapper l-margin-bn">
				<legend id="radio-legend">
					<span class="fieldset-legend js-form-required form-required">Radio Boxes</span>
				</legend>
				<div class="form-item">
					<input type="radio" id="radio-1" name="radio-group" value="yes" class="form-radio" required="required">
					<label for="radio-1" class="option">Choice 1</label>
				</div>
				<div class="form-item">
					<input type="radio" id="radio-2" name="radio-group" value="yes" class="form-radio" required="required">
					<label for="radio-2" class="option">Choice 2</label>
				</div>
				<div class="form-item">
					<input type="radio" id="radio-3" name="radio-group" value="yes" class="form-radio" required="required">
					<label for="radio-3" class="option">Choice 3</label>
				</div>
			</fieldset>

		</div>

<div class="cell medium-4">

			<fieldset id="checkbox-field" class="fieldgroup radios--wrapper form-wrapper l-margin-bn">
				<legend id="radio-legend">
					<span class="fieldset-legend js-form-required form-required">Checkboxes</span>
				</legend>
				<div class="form-item">
					<input type="checkbox" id="check-1" name="check-1" value="yes" class="form-radio" required="required">
					<label for="check-1" class="option">Checkbox 1</label>
				</div>
				<div class="form-item">
					<input type="checkbox" id="check-2" name="check-3" value="yes" class="form-radio" required="required">
					<label for="check-2" class="option">Checkbox 2</label>
				</div>
				<div class="form-item">
					<input type="checkbox" id="check-3" name="check-3" value="yes" class="form-radio" required="required">
					<label for="check-3" class="option">Checkbox 3</label>
				</div>
			</fieldset>

		</div>

<div class="cell medium-4">

			<div class="form-item">
				<label for="selection">Drop-down</label>
				<select id="selection" name="selection" class="form-select form-required" required="required">
					<option value="Option 1">Option 1</option>
					<option value="Option 2">Option 2</option>
					<option value="Option 3">Option 3</option>
				</select>
			</div>

		</div>
</fieldset>

Search Forms

Global Search

The global search form is located in the top right corner of the sitewide header.

Search Collection

For departments with a search collection, the search form is placed on the department site home page.

Form code output may differ in Drupal; all search form styles extend from class form--search which is assigned to the <form> tag.

Search City Clerk:

Get It Done Form

NOTE: Code example below does not include the script necessary to show/hide step selections. This behavior is controlled by conditional fields in Drupal's form module.

<div class="get-it-done">
	<form action="/">
		<fieldset class="step-1 form-item form-wrapper">
			<legend>
				<span class="fieldset-legend">I Need To...</span>
			</legend>
			<div class="fieldset-wrapper">
				<div class="js-form-item form-item js-form-type-select form-type-select js-form-item-i-need-to-7 form-item-i-need-to-7 form-no-label">
					<label for="edit-i-need-to-7" class="visually-hidden">I need to</label>
					<select class="form-select">
						<option value="">- None -</option>
						<option value="apply" selected="selected">Apply</option>
						<option value="status">Check Status of</option>
						<option value="find">Find</option>
					</select>
				</div>
			</div>
		</fieldset>

<fieldset class="step-2 form-item form-wrapper">
			<legend>
				<span class="fieldset-legend">Apply...</span>
			</legend>
			<div class="fieldset-wrapper">
				<div class="form-item form-type-select">
					<label for="apply-group" class="visually-hidden">Apply</label>

<select id="apply-group" name="apply-group" class="form-select">
						<option value="business_tax">Business Tax Certificate</option>
						<option value="jobs">City Job Opportunities</option>
						<option value="library_card">Library Card</option>
					</select>
				</div>
			</div>
		</fieldset>
		<fieldset class="step-3 form-item form-wrapper">
			<legend>
				<span class="fieldset-legend">Apply Now</span>
			</legend>
			<div class="fieldset-wrapper">
				<div id="apply-btax" class="form-item">
					<label for="apply-btax">Apply - Business License</label>
					<div class="grid-x grid-margin-x">
						<div class="cell small-8">
							<p class="l-padding-desktop-ts">Apply for a business tax certificate</p>
							<p class="fine-print"><em>The City issues these certificates instead of business licenses.</em></p>
						</div>
						<div class="cell small-4">
							<a class="btn btn--wide" title="Apply for a business license" href="#">Apply Now</a>
						</div>
					</div>
				</div>
			</div>
		</fieldset>
	</form>
</div>