inputs

import%20marimo%0A%0A__generated_with%20%3D%20%220.9.34%22%0Aapp%20%3D%20marimo.App(width%3D%22medium%22)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20__(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%20Inputs%0A%0A%20%20%20%20%20%20%20%20There%20are%20many%20way%20that%20a%20user%20can%20input%20with%20your%20notebook%2C%20such%20as%20text%20boxes%2C%20sliders%2C%20dates%2C%20and%20more.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20__(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%20Text%20boxes%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20__(mo)%3A%0A%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20username%20%3A%3D%20mo.ui.text(label%3D%22Username%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20email%20%3A%3D%20mo.ui.text(label%3D%22Email%22%2C%20kind%3D%22email%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.ui.text(label%3D%22Password%22%2C%20kind%3D%22password%22)%2C%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20)%0A%20%20%20%20return%20email%2C%20username%0A%0A%0A%40app.cell%0Adef%20__(mo%2C%20username)%3A%0A%20%20%20%20mo.stop(not%20username.value%2C%20mo.md(%22What%20is%20your%20name%3F%22))%0A%0A%20%20%20%20mo.md(f%22%F0%9F%91%8B%20Hello%20%7Busername.value%7D%2C%20nice%20to%20meet%20you!%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20__(mo)%3A%0A%20%20%20%20mo.ui.text_area(%0A%20%20%20%20%20%20%20%20label%3D%22A%20space%20for%20your%20thoughts%22%2C%20full_width%3DTrue%2C%20max_length%3D1000%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20__(mo)%3A%0A%20%20%20%20mo.ui.number(label%3D%22What%20is%20your%20favorite%20number%3F%22%2C%20start%3D0%2C%20stop%3D10)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20__(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%20Sliders%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20__(mo)%3A%0A%20%20%20%20slider%20%3D%20mo.ui.slider(0%2C%20100%2C%20value%3D50%2C%20label%3D%22Basic%20slider%22%2C%20show_value%3DTrue)%0A%20%20%20%20range_slider%20%3D%20mo.ui.range_slider(%0A%20%20%20%20%20%20%20%200%2C%20100%2C%20value%3D(30%2C%2070)%2C%20label%3D%22Range%20slider%22%2C%20show_value%3DTrue%0A%20%20%20%20)%0A%20%20%20%20custom_steps%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20steps%3D%5B1%2C%2010%2C%20100%2C%201000%5D%2C%20value%3D10%2C%20label%3D%22Custom%20steps%22%2C%20show_value%3DTrue%0A%20%20%20%20)%0A%20%20%20%20vertical%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%200%2C%20100%2C%20value%3D50%2C%20label%3D%22Vertical%20slider%22%2C%20orientation%3D%22vertical%22%0A%20%20%20%20)%0A%20%20%20%20mo.vstack(%5Bslider%2C%20range_slider%2C%20custom_steps%2C%20vertical%5D).center()%0A%20%20%20%20return%20custom_steps%2C%20range_slider%2C%20slider%2C%20vertical%0A%0A%0A%40app.cell%0Adef%20__(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%20Checkboxes%20and%20Radios%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20__(mo)%3A%0A%20%20%20%20COLORS%20%3D%20%5B%22red%22%2C%20%22green%22%2C%20%22blue%22%5D%0A%20%20%20%20colors%20%3D%20mo.ui.array(%0A%20%20%20%20%20%20%20%20%5Bmo.ui.checkbox(label%3Dcolor)%20for%20color%20in%20COLORS%5D%2C%0A%20%20%20%20)%0A%0A%20%20%20%20shape%20%3D%20mo.ui.radio(%0A%20%20%20%20%20%20%20%20%5B%22circle%22%2C%20%22square%22%2C%20%22triangle%22%5D%2C%20inline%3DTrue%2C%20value%3D%22square%22%0A%20%20%20%20)%0A%20%20%20%20mo.md(f%22%22%22%0A%20%20%20%20Let's%20build%20something%3A%0A%0A%20%20%20%20**Pick%20a%20shape%3A**%0A%0A%20%20%20%20%7Bshape%7D%0A%0A%20%20%20%20**Pick%20a%20color%3A**%0A%0A%20%20%20%20%7Bcolors.hstack().left()%7D%0A%20%20%20%20%22%22%22).center()%0A%20%20%20%20return%20COLORS%2C%20colors%2C%20shape%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20__(COLORS%2C%20colors%2C%20mo%2C%20shape)%3A%0A%20%20%20%20selected_colors%20%3D%20%5Bcolor%20for%20i%2C%20color%20in%20enumerate(COLORS)%20if%20colors.value%5Bi%5D%5D%0A%0A%0A%20%20%20%20def%20draw_shape(shape%2C%20colors)%3A%0A%20%20%20%20%20%20%20%20if%20not%20colors%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%22%22%0A%0A%20%20%20%20%20%20%20%20gradient%20%3D%20%22%22%0A%20%20%20%20%20%20%20%20if%20isinstance(colors%2C%20list)%20and%20len(colors)%20%3E%201%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20gradient_id%20%3D%20f%22grad%7Bhash(tuple(colors))%20%25%201000%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stops%20%3D%20%22%22.join(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'%3Cstop%20offset%3D%22%7Bi%2F(len(colors)-1)%7D%22%20style%3D%22stop-color%3A%7Bcolor%7D%3B%22%20%2F%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for%20i%2C%20color%20in%20enumerate(colors)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20gradient%20%3D%20f'%3Cdefs%3E%3ClinearGradient%20id%3D%22%7Bgradient_id%7D%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%7Bstops%7D%3C%2FlinearGradient%3E%3C%2Fdefs%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20fill_color%20%3D%20f%22url(%23%7Bgradient_id%7D)%22%0A%20%20%20%20%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20fill_color%20%3D%20colors%20if%20isinstance(colors%2C%20str)%20else%20colors%5B0%5D%0A%0A%20%20%20%20%20%20%20%20if%20shape%20%3D%3D%20%22circle%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20html%20%3D%20f'%3Csvg%20width%3D%22100%22%20height%3D%22100%22%3E%7Bgradient%7D%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22%7Bfill_color%7D%22%20%2F%3E%3C%2Fsvg%3E'%0A%20%20%20%20%20%20%20%20elif%20shape%20%3D%3D%20%22square%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20html%20%3D%20f'%3Csvg%20width%3D%22100%22%20height%3D%22100%22%3E%7Bgradient%7D%3Crect%20width%3D%2280%22%20height%3D%2280%22%20x%3D%2210%22%20y%3D%2210%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22%7Bfill_color%7D%22%20%2F%3E%3C%2Fsvg%3E'%0A%20%20%20%20%20%20%20%20elif%20shape%20%3D%3D%20%22triangle%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20html%20%3D%20f'%3Csvg%20width%3D%22100%22%20height%3D%22100%22%3E%7Bgradient%7D%3Cpolygon%20points%3D%2250%2C10%2090%2C90%2010%2C90%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22%7Bfill_color%7D%22%20%2F%3E%3C%2Fsvg%3E'%0A%20%20%20%20%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20html%20%3D%20%22Shape%20not%20recognized%22%0A%20%20%20%20%20%20%20%20return%20mo.Html(html)%0A%0A%0A%20%20%20%20mo.md(f%22%22%22%0A%20%20%20%20A%20%7B%22%2F%22.join(selected_colors)%7D%20%7Bshape.value%7D%3A%0A%20%20%20%20%7Bdraw_shape(shape.value%2C%20selected_colors)%7D%0A%20%20%20%20%22%22%22).center()%0A%20%20%20%20return%20draw_shape%2C%20selected_colors%0A%0A%0A%40app.cell%0Adef%20__(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%23%23%20Dates%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20__(mo)%3A%0A%20%20%20%20import%20datetime%0A%0A%20%20%20%20start_date%20%3D%20mo.ui.date(%0A%20%20%20%20%20%20%20%20label%3D%22Start%20date%22%2C%0A%20%20%20%20%20%20%20%20start%3Ddatetime.date(2020%2C%201%2C%201)%2C%0A%20%20%20%20%20%20%20%20stop%3Ddatetime.date(2020%2C%2012%2C%2031)%2C%0A%20%20%20%20)%0A%20%20%20%20end_date%20%3D%20mo.ui.date(%0A%20%20%20%20%20%20%20%20label%3D%22End%20date%22%2C%0A%20%20%20%20%20%20%20%20start%3Ddatetime.date(2020%2C%201%2C%201)%2C%0A%20%20%20%20%20%20%20%20stop%3Ddatetime.date(2020%2C%2012%2C%2031)%2C%0A%20%20%20%20)%0A%20%20%20%20return%20datetime%2C%20end_date%2C%20start_date%0A%0A%0A%40app.cell%0Adef%20__(end_date%2C%20mo%2C%20start_date)%3A%0A%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.hstack(%5Bstart_date%2C%20%22%E2%9E%A1%EF%B8%8F%22%2C%20end_date%5D).left()%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(f%22From%20%7Bstart_date.value%7D%20to%20%7Bend_date.value%7D%22)%2C%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20__(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%23%23%20Dropdowns%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20__(mo)%3A%0A%20%20%20%20single%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20%5B%22Option%201%22%2C%20%22Option%202%22%2C%20%22Option%203%22%2C%20%22Option%204%22%2C%20%22Option%205%22%5D%2C%0A%20%20%20%20%20%20%20%20label%3D%22Single%20select%22%2C%0A%20%20%20%20)%0A%20%20%20%20multi%20%3D%20mo.ui.multiselect(%0A%20%20%20%20%20%20%20%20%5B%22Option%201%22%2C%20%22Option%202%22%2C%20%22Option%203%22%2C%20%22Option%204%22%2C%20%22Option%205%22%5D%2C%0A%20%20%20%20%20%20%20%20label%3D%22Multi%20select%22%2C%0A%20%20%20%20%20%20%20%20value%3D%5B%22Option%201%22%2C%20%22Option%202%22%5D%2C%0A%20%20%20%20)%0A%20%20%20%20mo.hstack(%5Bsingle%2C%20multi%5D)%0A%20%20%20%20return%20multi%2C%20single%0A%0A%0A%40app.cell%0Adef%20__()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%20%20%20%20return%20(mo%2C)%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A