Allow standard html attributes to be passed to `input`

[probablykasper]

Allow standard html attributes to be passed to `input`

[pechitook]

It seems we have some alignment that at least id and aria- attributes are needed to have some basic accessibility support.

I think the remaining big item is about the implementation strategy. The way I see it we have at least two potential solutions

1- Expose specific, hardcoded attributes for id, and all the aria- attributes
2- Use something like I suggested initially <input {...$$restProps}> which would allow us to future-proof this library and even support valid custom attributes like data- ones. I could put up a PR just to discuss the approach here by looking at an example

Any pros/cons you all see here? cc @probablykasper

[probablykasper]

I don't want to allow all props for the reasons I already mentioned. id and aria- attributes make sense

[probablykasper]

Ah yeah you're right, it styles the <div> container instead of the <input>. Maybe it would work fine to change it to apply to <input>

[pechitook]

After some proper look at the Svelte documentation, I found https://svelte.dev/docs#template-syntax-attributes-and-props

$$restProps contains only the props which are not declared with export. It can be used to pass down other unknown attributes to an element in a component. It shares the same optimisation problems as $$props, and is likewise not recommended.

<input {...$$restProps}>

I think this could work.

[probablykasper]

I'm not too sure about this, what's your use case? I wouldn't want people to for example add a name because that would be a weird format to use and it would only work with the input

[pechitook]

@probablykasper the most straightforward use case I can think of is adding an id to be able to semantically use a label

<label for="some input>
<input id="some input" />
</label>

[probablykasper]

We could add an id prop

[elton2048]

It is better to allow extra class attributes to be in <input> element too for layout customization using like tailwind css.

[probablykasper]

class is supported

[elton2048]

class is supported

I am not sure if this is the case, but the source doesn't show the class for the <input> element getting the class attributes (I am the <input> element inside the <div> wrapper element).

<input
    class:invalid={!valid}
    type="text"
    value={text}

[spy16]

example add a name because that would be a weird format to use

Could you elaborate on this please? To make it work with forms, this is needed.

Some reasons to allow control on attributes of input:

• To make it work with forms (e.g., for use with SvelteKit actions), having the ability to set name is useful.
• To add labels id would be needed.
• To be able to set all the aria- attributes

Overall, I think allowing all standard input attributes, except where it would interfere with the custom logic of the component would be good idea i think. This way, it would be an enhanced version of input type="date" and allow all the patterns that we can use with it (#UseThePlatform 🙂)

[probablykasper]

Could you elaborate on this please? To make it work with forms, this is needed.

The input is a customizable user-facing value, not a data value. Parsing on the server would get complicated, especially for user-dependent formats. It also wouldn't work for the DatePicker component.

I'd be happy to have other attributes that make sense, like id.

Would be good to have built-in aria- attributes

[jhoddevik]

So ... how can we use this in forms?

[probablykasper]

By binding to the date value and putting it in an input element

[eberhapa]

We could add an id prop

That's exactly what I need because of Accessibility reasons to make possible.

[eberhapa]

What's the problem of giving the possibility to pass all props? It would be the most flexible way.

[happysalada]

Could we also add a "required" attribute to be passed.
if used in a form and the user didn't input, but is trying to submit, most browser have auto focuse on the required field. This would be nice to have.

[probablykasper]

required and id are now supported. For name, see

• #44

About aria-, feel free to open a new issue with more concrete details