pdsls.dev
1export interface TextInputProps {
2 ref?: HTMLInputElement | ((el: HTMLInputElement) => void);
3 class?: string;
4 id?: string;
5 type?: "text" | "email" | "password" | "search" | "tel" | "url";
6 name?: string;
7 required?: boolean;
8 disabled?: boolean;
9 placeholder?: string;
10 spellcheck?: boolean;
11 value?: string | string[];
12 onInput?: (ev: InputEvent & { currentTarget: HTMLInputElement }) => void;
13}
14
15export const TextInput = (props: TextInputProps) => {
16 return (
17 <input
18 type={props.type ?? "text"}
19 id={props.id}
20 name={props.name}
21 value={props.value ?? ""}
22 ref={props.ref}
23 spellcheck={props.spellcheck ?? false}
24 placeholder={props.placeholder}
25 disabled={props.disabled}
26 required={props.required}
27 class={
28 "dark:bg-dark-100 dark:inset-shadow-dark-200 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 inset-shadow-xs select-none placeholder:text-sm focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400 " +
29 props.class
30 }
31 onInput={props.onInput}
32 />
33 );
34};