[ @sdxc/u/state ]
required
Sugar over when('&:required, &[aria-required="true"]', input), matching required controls and widgets.
import { required } from "@sdxc/u/state";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:
<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:
<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.
u.at("md", u.required(u.fg("danger")))Signature
u.required(input: UtilityInput<Node>)