Adding attributes to inputs

[thohan88]

There may be an easy way of doing this, but all my attempts to add attributes to an input using input_xxx() has failed.

My use case is adding bootstrap validation by setting the required attribute. It would be nice if something like this could work:

ui.input_text("id", "label", {"required":True})
# TypeError: Invalid type for attribute: <class 'dict'>.

I guess it would not be clear whether such attributes applies to the <form>, <label> or <input> tag, so I'm not really sure what a good api looks like here. This is an okay workaround for simple inputs, but more cumbersome for complex inputs (e.g input_select).

ui.tags.input(
  id = "id", 
  label = "label",
  type = "text",
  required = True
).get_html_string
# <input id="id" label="label" type="text" required=""/>

I also believe this workaround requires you to use resolve_id(id) manually to make it work in modules?

[cpsievert]

Most inputs and other UI should return either a ui.Tag or ui.TagList. In the former case, you can mutate the attributes via .attrs:

>>> from shiny.ui import div
>>> x = div()
>>> x.attrs["foo"] = "bar"
>>> x
<div foo="bar"></div>

In the latter case, you'll want to iterate over the list, and update ui.Tags as needed.

I also believe this workaround requires you to use resolve_id(id) manually to make it work in modules?

Yep, if you're encoding ids in HTML directly for a Shiny binding, resolve_id(id) is needed for module support

[thohan88]

Thanks for the response, @cpsievert.

It does not solve the example above as it adds the attribute to the outer <div>-tag in the case of a shiny input. Is there any way to add the attribute to a child tag this way?

inp = ui.input_text("user_input", "Enter text:", placeholder="Type something...")
inp.attrs["required"] = True
inp.get_html_string
#<div class="form-group shiny-input-container" required="">
#<label class="control-label" id="user_input-label" for="user_input">Enter text:</label>
#<input id="user_input" type="text" class="shiny-input-text form-control" value="" placeholder="Type something..." autocomplete="off"/>
#</div>

[cpsievert]

Yes, tags have a .children attribute:

inp.children[1].attrs["required"] = True

[thohan88]

Thanks @cpsievert, I should have caught that.

Update: I just discovered the shiny_validate package which solves all input validation out of the box.

For anyone else wondering how to implement input validation with this, here is an example on shinylive.io.