<jupyter_start><jupyter_text>ipyvuetify Tutorial 03 - Input WidgetsThis is the third in a series of ipyvuetify app development tutorials. If you're just getting started with ipyvuetify and haven't checked out the first tutorial "01 Installation and First Steps.ipynb", be sure to check that one out first.In this notebook we will cover many input widgets:* Checkbox* Switch* Radio buttons* Sliders* Dropdowns* ComboboxesWe are **not** covering text inputs or buttons - we'll cover those later!First of all, we'll load the required packages, and test to make sure your environment has all the dependencies set-up successfully:<jupyter_code>from time import sleep
import ipyvuetify as v
import ipywidgets as widgets
import markdown

v.Btn(class_='icon ma-2',
      style_='max-width:100px',
      color='success',
      children=[v.Icon(children=['mdi-check'])])<jupyter_output><empty_output><jupyter_text>If you see a green button with a checkmark above, you have successfully installed ipyvuetify and enabled the extension. Good work!If not, refer to the first tutorial and/or the ipyvuetify documentation to set up your system before going further.  v.Checkbox()Probably the simplest type of user input is the checkbox:<jupyter_code>v.Checkbox(label='My Checkbox Label')<jupyter_output><empty_output><jupyter_text>As you can see from the example above, the description text is set by the `label` argument.The value of the checkbox is set (and accessed, as we will see next) through the `v_model` property (which is like the `value` property in `ipywidgets`). This is how you create a checkbox that is checked by default:<jupyter_code>v.Checkbox(label='My Checkbox Label', v_model=True)<jupyter_output><empty_output><jupyter_text>To actually do something with the value of the checkbox, we assign it to a variable, and then can access the value with the `v_model` property:<jupyter_code>mycheckbox = v.Checkbox(label='My Checkbox Label', v_model=False)
mycheckbox
mycheckbox.v_model<jupyter_output><empty_output><jupyter_text>Try checking the checkbox, and then re-executing the above cell. Notice that the value of the `v_model` property has changed from False to True.You can also do this programatically (keep an eye on the checkbox above):<jupyter_code>mycheckbox.v_model = True
sleep(1)
mycheckbox.v_model = False
sleep(1)
mycheckbox.v_model = True
sleep(1)
mycheckbox.v_model = False<jupyter_output><empty_output><jupyter_text>Customizing the appearence of a `v.Checkbox`Next we will customize the look of our checkbox.For an extensive description, again, see the [vuetify.js documentation](https://vuetifyjs.com/en/components/selection-controls/).You can display a 'hint' to help users understand what your checkbox is all about:<jupyter_code>v.Checkbox(
    class_='pa-4',
    label='My Checkbox Label',
    persistent_hint=True,
    hint='Read me if you need some help deciding whether to check me or not...'
)<jupyter_output><empty_output><jupyter_text>Setting `dense=True` makes it take up a bit less vertical space, and you can set the colour, too:<jupyter_code>v.Checkbox(
    dense=True,
    color='error',
    class_='pa-1',
    label='My Checkbox Label',
    v_model=True,
    persistent_hint=True,
    hint='Read me if you need some help deciding whether to check me or not...'
)<jupyter_output><empty_output><jupyter_text>You can set a background colour, if you want to, and change the `theme` to dark<jupyter_code>v.Checkbox(
    background_color='primary',
    dark=True,
    class_='pa-4',
    label='My Checkbox Label'
)<jupyter_output><empty_output><jupyter_text>Another nice feature is the ability to prepend or append an icon. Here I prepend and append icons, as well as putting it in a row with a spacer at the end.See the [Material Design Icons](https://cdn.materialdesignicons.com/4.5.95/) page for a full list of available icons.<jupyter_code>v.Row(children=[
    v.Checkbox(class_='pa-4',
               v_model = True,
               label='My Checkbox Label',
               prepend_icon='mdi-recycle',
               append_icon='mdi-trash-can'),
    v.Spacer()
])<jupyter_output><empty_output><jupyter_text>Wowee that was a lot of info about checkboxes.But most of the things we just played around with apply to the other input types:* You access or set the value of an input with the `v_model` property* Inputs have both a label and a hint that can be set.* You can prepend or append an icon.* You can change the colourAn alternative to a checkbox, that is functionally the same is the `v.Switch`  `v.Switch()``v.Switch()` is just like a checkbox; the `v_model` is either `True` or `False`, but it has a different look and feel (and some different customization options) that you may prefer:<jupyter_code>myswitch = v.Switch(label='My Checkbox Label', v_model=True)
myswitch<jupyter_output><empty_output><jupyter_text>Just like with the checkbox, you can access (and set!) the value of the switch with the `v_model` property:<jupyter_code>myswitch.v_model
v.Switch(
    label='My Checkbox Label',
    class_='pa-2',
    inset=True,
    color='warning',
    v_model=True,
    persistent_hint=True,
    hint='Read me if you need some help deciding whether to check me or not...'
)<jupyter_output><empty_output><jupyter_text>There are lots of things I haven't covered here (largely because I haven't figured them out yet...) that are pretty cool, like [chip groups](https://vuetifyjs.com/en/components/item-groups/chips) and [checkbox arrays](https://vuetifyjs.com/en/components/selection-controls/checkboxes-array), but we've learned enough about checkboxes and switches to be getting on with.Next, let's look at radio buttons...  Radio Buttons<jupyter_code>favourite_pie_type = v.RadioGroup(class_='px-2 my-0 py-2',
             v_model='rhubarb',
             label = "What's your favourite type of pie?",
             children=[
                 v.Radio(label='apple', value='apple'),
                 v.Radio(label='rhubarb', value='rhubarb'),
                 v.Radio(label='blueberry', value='blueberry'),
                 v.Radio(label='pumpkin', value='pumpkin'),
                 v.Radio(label='mock cherry', value='mock cherry')
             ])
favourite_pie_type<jupyter_output><empty_output><jupyter_text>Just like before, we get and/or set the value of the checkbox input with the `v_model` input.  favourite_pie_type.v_model You can display a hint in the same was as before, too.You can display the options in a row instead of in a column by setting the `row` value to True:<jupyter_code>v.RadioGroup(class_='px-2 my-0 py-2',
             v_model='rhubarb',
             label = "What's your favourite type of pie?",
             hint = "I'm sure it's rhubarb. Skip the strawberries.",
             persistent_hint=True,
             row=True,
             children=[
                 v.Radio(label='apple', value='apple'),
                 v.Radio(label='rhubarb', value='rhubarb'),
                 v.Radio(label='blueberry', value='blueberry'),
                 v.Radio(label='pumpkin', value='pumpkin'),
                 v.Radio(label='mock cherry', value='mock cherry')
             ])<jupyter_output><empty_output><jupyter_text>SlidersLet's just show one example with the main options set; you can fiddle around with it to suit your needs/tastes<jupyter_code>v.Slider(label='My Slider Name',
         hint='My Slider Hint',
         append_icon='mdi-biohazard',
         vertical=False,
         persistent_hint=True,
         min=0,
         max=100,
         loading=False,
         step=10,
         thumb_size=24,
         tick_size=4,
         class_='mx-6 mt-8',
         thumb_label=True,
         tick_labels=list(range(0, 110, 10)),
         ticks=True)<jupyter_output><empty_output><jupyter_text>Range SliderJust like a slider, but has a min and a max value that can be set/fetched in the v_model property.<jupyter_code>my_range_slider = v.RangeSlider(label='My Range Slider Name',
              hint='My Range Slider Hint',
              min=0,
              max=100,
              thumb_size=24,
              class_='mx-6 mt-8',
              v_model=[40, 60],
              thumb_label = 'always')

my_range_slider
my_range_slider.v_model<jupyter_output><empty_output><jupyter_text>DropdownDropdowns are pretty straightforward, and very flexible.Check out the [vuetify documetation](https://vuetifyjs.com/en/components/selects/) for a detailed introduction.The default dropdown lets you choose one option.<jupyter_code>v.Select(class_='ma-4',
         autofocus=False,
         label='Dropdown Label',
         chips=False,
         deletable_chips=False,
         clearable=False,
         color='primary',
         dark=False,
         dense=True,
         hint='Helpful hint',
         items=['one','two','three','four'],
         v_model='one'
)<jupyter_output><empty_output><jupyter_text>You can have a different display value for the dropdown options, to make them more descriptive by making the `items` argument a list of dicts with `text` and `value` keys:<jupyter_code>test = v.Select(class_='ma-4',
         autofocus=False,
         label='Dropdown Label',
         chips=False,
         deletable_chips=False,
         clearable=False,
         color='primary',
         dark=False,
         dense=True,
         hint='Helpful hint',
         filled=True,
         items=[{'text':'one is more descriptive','value':'one'},
               {'text':'two is more descriptive','value':'two'},
               {'text':'three is more descriptive','value':'three'},
               {'text':'four is more descriptive','value':'four'}],
         v_model='one'
)
test

test.v_model<jupyter_output><empty_output><jupyter_text>You can also have a dropdown that lets you select more than one choice. If you are setting the default value (`v_model`), be sure you make it an array rather than a string:<jupyter_code>v.Select(class_='ma-4',
         multiple=True,
         label='Multi select dropdown',
         chips=True,
         deletable_chips=True,
         clearable=True,
         outlined=True,
         color='primary',
         hint='Helpful hint',
         persistent_hint=True,
         items=['one','two','three','four'],
         v_model=['one']
)<jupyter_output><empty_output><jupyter_text>ComboboxA combobox is similar to a dropdown, but it also lets you type to search through the items and also *create* items.<jupyter_code>v.Combobox(
    class_='ma-4',
    multiple=True,
    label='Combobox example',
    placeholder='My placeholder',
    chips=True,
    clearable=True,
    hint='Helpful hint',
    persistent_hint=True,
    hide_selected=True,
    items=['one', 'two', 'three', 'four'],
    auto_select_first=False,
    v_model=[],
)<jupyter_output><empty_output><jupyter_text>You can also display a message to let the user know they can create an item if the item they are typing does not exist, like this:<jupyter_code>v.Combobox(
    class_='ma-4',
    solo=True,
    multiple=True,
    label='Combobox example',
    chips=True,
    deletable_chips=True,
    clearable=True,
    color='primary',
    hint='Helpful hint',
    persistent_hint=True,
    hide_selected=True,
    items=['one', 'two', 'three', 'four'],
    auto_select_first=False,
    v_model=['one'],
    v_slots=[{
        'name':
        'no-data',
        'children':
        v.ListItem(children=[
            v.ListItemContent(children=[
                v.ListItemTitle(
                    children=['Your search returned no items. Press Enter to create a new one'])
            ])
        ])
    }],
)<jupyter_output><empty_output><jupyter_text>Setting `auto_select_first` to true seems to disable the functionality to create new items, give it a try:<jupyter_code>test = v.Combobox(class_='ma-4',
           filled=True,
           multiple=True,
           label='Combobox example',
           placeholder='My placeholder',
           chips=True,
           deletable_chips=True,
           clearable=True,
           color='primary',
           hint='Helpful hint',
           persistent_hint=True,
           items=['one', 'two', 'three', 'four'],
           auto_select_first=True,
           v_model=[]
)
test<jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.10563841993115883, 'fraction_numerical': 0.004999180462219309, 'mean_word_length': 3.4471574344023326, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 85, 'https://': 5, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '21', 'dir': 'jupyter-structured-clean-dedup', 'id': '458683', 'license': 'MIT', 'n_tokens_mistral': 3748, 'n_tokens_neox': 3641, 'n_words': 1125, 'path': '03-Input_Widgets.ipynb', 'repo_name': 'radinplaid/ipyvuetify_tutorial', 'size': '12202'}