react.mdx

title	current_page
Forms in React	react

import {Box, Heading} from '@primer/react' import FormsLayout from '~/src/layouts/forms-layout' export default FormsLayout

<Box mb={4} display="flex" alignItems="flex-start" flexDirection={['column', 'column', 'column', 'column', 'row']} sx={{gap: 3}}

Autocomplete

An autocomplete input renders a text input that allows a user to quickly filter through a list of options to pick one or more values.

Interface guidelines | Primer React implementation

<Box mb={4} display="flex" alignItems="flex-start" flexDirection={['column', 'column', 'column', 'column', 'row']} sx={{gap: 3}}

Checkbox group

A set of checkboxes to let users make one or more selections from a short list of options

Interface guidelines | Primer React implementation

<Box mb={4} display="flex" alignItems="flex-start" flexDirection={['column', 'column', 'column', 'column', 'row']} sx={{gap: 3}}

Form control

A form control renders a labelled input and, optionally, associated validation text and/or hint text.

Interface guidelines | Primer React implementation

<Box mb={4} display="flex" alignItems="flex-start" flexDirection={['column', 'column', 'column', 'column', 'row']} sx={{gap: 3}}

Radio group

A set of radio inputs to let users make a single selection from a short list of options

Interface guidelines | Primer React implementation

<Box mb={4} display="flex" alignItems="flex-start" flexDirection={['column', 'column', 'column', 'column', 'row']} sx={{gap: 3}}

Select dropdown

A select input may be used when a user needs to select one option from a long list

Primer React implementation

<Box mb={4} display="flex" alignItems="flex-start" flexDirection={['column', 'column', 'column', 'column', 'row']} sx={{gap: 3}}

Textarea

A text area is used to put multiple lines of text in an input

Primer React implementation

<Box mb={4} display="flex" alignItems="flex-start" flexDirection={['column', 'column', 'column', 'column', 'row']} sx={{gap: 3}}

Text input

A text input is used to set a value that is a single line of text. See the list of{' '} types in the MDN docs.

Interface guidelines | Primer React implementation