Adding Input

[tleperou]

🙌

Summary

Input component aims at providing support for user input

• aria compliant (eg. semantic, state)
• key control (eg. focus, navigate fields)
• good practices (eg. label, hints, errors)

It doesn't intend to provide validations support (yet).

Implementation

I could get the above working, with

• semantic and aria attributes
• automatic for attribute

const Input = component$(() => {
  return (
    <Input.Root>
    <Input.Label>On/Off</Input.Label>
    <Input.Switch
      checked={checkedSignal.value}
      onChange$={(_, { checked }) => {
          checkedSignal.value = checked;
        }}
      />
      <Input.Hint>Choose if it's on or off</Input.Hint>
      <Input.Message>Can't be turned off at the moment</Input.Message>
    </Input.Root>
  )
});

Style

In order to pass scoped styles down to the child nodes when using useScopedStyles

const { scopeId } = useStylesScoped$(styles);

// .. then

<Input.Label class={[scopeId, 'control']}></Input.Label>

Works as usual with any other patterns (eg. styled of vanilla extract css)