[ @sdxc/u/state ]
indeterminate
Matches indeterminate checkboxes and ARIA mixed-state widgets, painting a third visual state; it also matches radios in an unselected group and valueless <progress>, so scope it to the control you mean.
import { indeterminate } from "@sdxc/u/state";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.indeterminate(u.bg("brand.solid")) | css({ '&:indeterminate, &[aria-checked="mixed"]': { backgroundColor: "..." } }) |
Examples
Basic example
Wrap utilities in indeterminate() to style a checkbox that is neither on nor off, like a "select all" whose list is partly ticked:
- All files
- report.pdf
- notes.txt
<ul mix={[vstack({ gap: 2 }), text("sm")]}>
<li mix={[hstack({ gap: 2, align: "center" }), weight("semibold")]}>
<span
role="checkbox"
aria-checked="mixed"
mix={[
is(4),
bs(4),
rounded("sm"),
border({ color: "neutral.strong", width: 2 }),
indeterminate([bg("warning.solid"), border("warning.solid")]),
]}
/>
All files
</li>
<li mix={[hstack({ gap: 2, align: "center" })]}>
<span
role="checkbox"
aria-checked="true"
mix={[
is(4),
bs(4),
rounded("sm"),
border({ color: "neutral.strong", width: 2 }),
checked([bg("brand.solid"), border("brand.solid")]),
]}
/>
report.pdf
</li>
<li mix={[hstack({ gap: 2, align: "center" })]}>
<span
role="checkbox"
aria-checked="false"
mix={[is(4), bs(4), rounded("sm"), border({ color: "neutral.strong", width: 2 })]}
/>
notes.txt
</li>
</ul>Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.indeterminate(u.bg("brand.solid")))Signature
u.indeterminate(input: UtilityInput<Node>)