Recipes
/
Others
/
Checkboxes
A smart checkboxes group where you can track all checked boxes, as well as place a limit on how many checks are possible.
This recipe use a dict[str, bool]
for the checkboxes state tracking.
Additionally, the limit that prevent the user from checking more boxes than allowed with a computed var.
class CBoxeState(rx.State): choices: dict[str, bool] = {k: False for k in ["Choice A", "Choice B", "Choice C"]} _check_limit = 2 def check_choice(self, value, index): self.choices[index] = value @rx.var def choice_limit(self): return sum(self.choices.values()) >= self._check_limit @rx.var def checked_choices(self): choices = [l for l, v in self.choices.items() if v] return " / ".join(choices) if choices else "None" import reflex as rx def render_checkboxes(values, limit, handler): return rx.vstack( rx.foreach( values, lambda choice: rx.checkbox( choice[0], checked=choice[1], disabled=~choice[1] & limit, on_change=lambda val: handler(val, choice[0]), ), ) ) def index() -> rx.Component: return rx.center( rx.vstack( rx.text("Make your choices (2 max):"), render_checkboxes( CBoxeState.choices, CBoxeState.choice_limit, CBoxeState.check_choice, ), rx.text("Your choices: ", CBoxeState.checked_choices), ), height="100vh", )
Did you find this useful?