packages/ui/src/components/input.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import { TextField as Kobalte } from "@kobalte/core/text-field"
import { Show, splitProps } from "solid-js"
import type { ComponentProps } from "solid-js"

export interface InputProps
  extends ComponentProps<typeof Kobalte.Input>,
    Partial<Pick<ComponentProps<typeof Kobalte>, "value" | "onChange" | "onKeyDown">> {
  label?: string
  hideLabel?: boolean
  description?: string
}

export function Input(props: InputProps) {
  const [local, others] = splitProps(props, [
    "class",
    "label",
    "hideLabel",
    "description",
    "value",
    "onChange",
    "onKeyDown",
  ])
  return (
    <Kobalte data-component="input" value={local.value} onChange={local.onChange} onKeyDown={local.onKeyDown}>
      <Show when={local.label}>
        <Kobalte.Label data-slot="label" classList={{ "sr-only": local.hideLabel }}>
          {local.label}
        </Kobalte.Label>
      </Show>
      <Kobalte.Input {...others} data-slot="input" class={local.class} />
      <Show when={local.description}>
        <Kobalte.Description data-slot="description">{local.description}</Kobalte.Description>
      </Show>
      <Kobalte.ErrorMessage data-slot="error" />
    </Kobalte>
  )
}