# Inputs

Our form input guidelines are based on the [US Web Design System](https://designsystem.digital.gov/components/form-controls/).

### Text inputs

Good for freeform responses.

Bad for structured data when you want the user to choose from an existing set of options. Text inputs are also harder for City staff to work with.

### Number inputs

Number fields require the unit you are measuring next to the field.

| Do                                                                    | Do not                                                          |
| --------------------------------------------------------------------- | --------------------------------------------------------------- |
| <p>Current market-rate dwelling units</p><p>\[number field] units</p> | <p>Current market-rate dwelling units</p><p>\[number field]</p> |

### Radio buttons&#x20;

Radio buttons allow users to see all available choices and select exactly one.

Good for choosing one option from a predetermined list.

Bad for choosing from more than 7 options or when a user can choose multiple options.

### Check boxes&#x20;

Checkboxes allow users to select one or more options from a visible list.

Good for choosing one or more options from a predetermined list.

Bad for choosing from more than 7 options or when a user can only select one option.

A single checkbox can also be used to confirm, such as terms or disclaimers.&#x20;

### Type-ahead dropdown combo box

When there are more than 7 options (or 6 options plus an Other), use a type-ahead dropdown field that auto-populates from available options.

<div align="left"><img src="https://lh6.googleusercontent.com/a_DGoIlrYMHgIj6vbOZyD1qLe_n6GbxVWCFndOsVCo8-iwMjthBerlH8g4SbH8GRD1rJNfHfarEoNUpuPuDJqIl-_YRTGpHLYftEcvt4Lblg9DE-DWGjzHcmSWvxLOpeUqmwZ8nf" alt=""></div>

### **Date input**

Birth dates and other known dates are easiest typed in.

![](/files/-M8NaLNGGolcETfVJsJZ)

A date picker is best for scheduling or choosing a day in the recent past or near future.

![](/files/-M8NaTYocj9RM49V7Som)

### **Placeholder text**

We do not use placeholder text in any field where a user types in an answer. It causes confusion and is not accessible.

We can use placeholder text for dropdowns, like “State” or “Type of construction”.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sfdigitalservices.gitbook.io/style-guide/how-to-write-forms/inputs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.