Skip to main content

True / false

We can specify a simple true / false radio choice for the user. It will set in the data a boolean based on the radio selection. As the basic inputs, inline property can be used to be visually shown as aligned with his label.

{
"component": "true_false",
"label": "Is it true ?"
}
{
"component": "true_false",
"label": "Is it true ?",
"inlineOptions": true
}

By default, the options are visually placed one above the other. We can display them on the same line with the inlineOptions property set to true.

{
"component": "true_false",
"label": "Is it true ?",
"trueLabel": "Yes it is true",
"falseLabel": "No it is false"
}

By default, the label of the true option is : t:yes and the label for the false option is t:no, we can override them with the trueLabel and falseLabel properties.

as: button

We can display the true / false input as a button by setting the as property to button.

{
"component": "true_false",
"label": "Is it true ?",
"as": "button"
}

Storybook Examples

True False#

True False Required#

True False With Default Value#

True False Inline Options#

Custom Labels True False#

Object For Labels True False#

Custom Translated Labels True False#

Stacked True False#

Stacked True False Inline Options#

True False As Button#

True False As Button With Props#

True False As Button Disabled#

True False As Button Invalid#