# required

> Sugar over `when('&:required, &[aria-required="true"]', input)`, matching required controls and widgets.

```ts
import { required } from "@sdxc/u/state";
```

Sugar over `when('&:required, &[aria-required="true"]', input)`, matching
required controls and widgets. Add a textual cue in the label too, since
colour and a bare asterisk alone only reach sighted users.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.required(u.fg("danger"))` | `css({ '&:required, &[aria-required="true"]': { color: "..." } })` |

## Examples

### Basic example

Wrap utilities in `required()` to style a field the form cannot be sent without:

```tsx
<div mix={[...]}>
	<label mix={[vstack({ gap: 1 }), text("sm"), weight("medium")]}>
		Full name (required)
		<input
			type="text"
			required
			mix={[border("neutral.border"), required(border("brand.strong")), ...]}
		/>
	</label>
	<label mix={[vstack({ gap: 1 }), text("sm"), weight("medium")]}>
		Company (optional)
		<input
			type="text"
			mix={[border("neutral.border"), required(border("brand.strong")), ...]}
		/>
	</label>
</div>
```

### Combining with invalid

Pair `required()` with `invalid()` so an untouched required field never looks like an error. Clear the field, then click outside it:

```tsx
<label mix={[vstack({ gap: 1 }), text("sm"), weight("medium")]}>
	Project name (required)
	<input
		type="text"
		required
		value="Uptime"
		mix={[
			border("neutral.border"),
			required(border("brand.strong")),
			invalid([border("danger.strong"), fg("danger")]),
			...,
		]}
	/>
</label>
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.required(u.fg("danger")))
```

## Signature

```ts
u.required(input: UtilityInput<Node>)
```