@component
def CheckBox(label, label_position, value, variant, **kwargs):
 is_checked, toggle_is_checked, _ = use_toggle()
 #print(is_checked)
 return Container(
 html.label(label) if label_position == "left" else None,
 html.div(
 {
 "tab_index": kwargs.get("tab_index"),
 "class_name": "checkbox " + variant,
 "on_click": toggle_is_checked
 },
 html.div(
 {
 "style": {
 "display": "block" if is_checked else "none"
 }
 }
 )
 ),
 html.label(label) if label_position == "right" else None,
 alignment = "center", direction = "row"
 )

@component
def DropDown(*args, label, align, variant, caret, **kwargs):
 is_shown, toggle_is_shown, set_is_shown = use_toggle()
 print(is_shown)
 selected_value, set_selected_value = use_state(label)
 # def get_selection(e):
 # print(e)
 # children = [child for child in args]
 return Container(
 Button(selected_value, FAIcon("caret-down") if caret else "", variant = variant, on_mouse_down = toggle_is_shown, on_blur = set_is_shown(False)),
 html.div(
 {
 "class_name": "dropdown show" if is_shown else "dropdown"
 },
 args
 ),
 alignment = align or "start", direction = "column", width = "fit-content", position = "relative"
 )