Valid
One branch when it is valid, another when it is not.
@stellaria/nebula-webValidPropsPreview
Valid renders children when valid is true and invalid when it is not. Pure logic,
server-safe.
What it adds over Conditional
The names. valid / invalid is the vocabulary of a form, and a block that reads
<Valid valid={email.ok} invalid={<FieldError />}> says what it is about without a comment.
Conditional says the same thing in generic terms, and both compile to the same two branches.
Reach for it in validation, and for Conditional everywhere else.
Props
3| Prop | Type | Default |
|---|---|---|
children What renders once the value is valid. | ReactNode | — |
invalid What stands in when the value is not valid — an error message, a placeholder, an empty state. Left out, an invalid value renders nothing. | ReactNode | null |
valid Which branch renders. It defaults to false rather than true, so leaving it out renders the `invalid` branch and never the children. | boolean | false |