checkbox.py 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. """A checkbox component."""
  2. from typing import Dict
  3. from reflex.components.component import EVENT_ARG
  4. from reflex.components.libs.chakra import ChakraComponent
  5. from reflex.vars import Var
  6. class Checkbox(ChakraComponent):
  7. """The Checkbox component is used in forms when a user needs to select multiple values from several options."""
  8. tag = "Checkbox"
  9. # Color scheme for checkbox.
  10. # Options:
  11. # "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan"
  12. # | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
  13. color_scheme: Var[str]
  14. # "sm" | "md" | "lg"
  15. size: Var[str]
  16. # If true, the checkbox will be checked.
  17. is_checked: Var[bool]
  18. # If true, the checkbox will be disabled
  19. is_disabled: Var[bool]
  20. # If true and is_disabled is passed, the checkbox will remain tabbable but not interactive
  21. is_focusable: Var[bool]
  22. # If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox and does not modify the is_checked var.
  23. is_indeterminate: Var[bool]
  24. # If true, the checkbox is marked as invalid. Changes style of unchecked state.
  25. is_invalid: Var[bool]
  26. # If true, the checkbox will be readonly
  27. is_read_only: Var[bool]
  28. # If true, the checkbox input is marked as required, and required attribute will be added
  29. is_required: Var[bool]
  30. # The name of the input field in a checkbox (Useful for form submission).
  31. name: Var[str]
  32. # The spacing between the checkbox and its label text (0.5rem)
  33. spacing: Var[str]
  34. def get_controlled_triggers(self) -> Dict[str, Var]:
  35. """Get the event triggers that pass the component's value to the handler.
  36. Returns:
  37. A dict mapping the event trigger to the var that is passed to the handler.
  38. """
  39. return {
  40. "on_change": EVENT_ARG.target.checked,
  41. }
  42. class CheckboxGroup(ChakraComponent):
  43. """A group of checkboxes."""
  44. tag = "CheckboxGroup"
  45. # The value of the checkbox group
  46. value: Var[str]
  47. # The initial value of the checkbox group
  48. default_value: Var[str]
  49. # If true, all wrapped checkbox inputs will be disabled
  50. is_disabled: Var[bool]
  51. # If true, input elements will receive checked attribute instead of isChecked. This assumes, you're using native radio inputs
  52. is_native: Var[bool]