oppi.li
1export interface TextInputProps {
2 ref?: HTMLInputElement;
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 focus:outline-1.5 dark:shadow-dark-900/80 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-slate-900 dark:focus:outline-slate-100 " +
29 props.class
30 }
31 onInput={props.onInput}
32 />
33 );
34};