# if

> Conditionally returns `input` as one mixin, or `false` when `condition` is falsy.

```ts
import { if } from "@sdxc/u/general";
```

Conditionally returns `input` as one mixin, or `false` when `condition` is
falsy. A list of utilities is merged through `u.combine()` into a single
class, so it cascades as one unit wherever it sits in a `mix` list.

## Examples

### Basic example

Use `u.if(condition, utility)` to apply a utility, or a list of them, only when a condition holds; it is written `u.if` because `if` is a reserved word:

```tsx
<nav mix={[hstack({ gap: 1 })]}>
	{["Overview", "Activity", "Settings"].map((tab) => (
		<a
			href={`/${tab.toLowerCase()}`}
			mix={[
				p(2, 3),
				rounded("md"),
				weight("medium"),
				u.if(tab === "Activity", [bg("brand.solid"), fg("brand.onSolid")]),
			]}
		>
			{tab}
		</a>
	))}
</nav>
```

### Styling from data

Conditions can read each record, like `u.if(message.unread, weight("semibold"))` to set unread messages in bold:

```tsx
<ul mix={[maxIs(96), ...]}>
	{[
		{ from: "Priya", subject: "Venue confirmed for the offsite", unread: true },
		{ from: "Marco", subject: "Re: invoice 2041", unread: false },
		{ from: "Lena", subject: "Draft of the launch post", unread: true },
	].map((message) => (
		<li
			mix={[hstack({ gap: 3, justify: "between" }), u.if(message.unread, weight("semibold"))]}
		>
			<span>{message.subject}</span>
			<span mix={[text("sm"), fg("neutral.muted")]}>{message.from}</span>
		</li>
	))}
</ul>
```

```ts
u.if(isActive, u.bg("brand.tint"))
```

```ts
u.if(isActive, [u.bg("brand.solid"), u.fg("brand.onSolid")])
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.if(isActive, u.bg("brand.tint")))
```

## Responsive design

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

```ts
u.at("md", u.if(isActive, u.bg("brand.tint")))
```

## Signature

```ts
u.if(condition: unknown, input: UtilityInput<Node>)
```