Components
Input
A single-line text input, wrapping Morphos's Input primitive.
Installation
npx kosmesis add inputpnpm dlx kosmesis add inputyarn dlx kosmesis add inputbunx kosmesis add inputInstall the following dependencies:
npm install @morphos/inputspnpm add @morphos/inputsyarn add @morphos/inputsbun add @morphos/inputsCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { Component } from "@praxisjs/decorators";import { Input as MorphosInput, type InputProps as MorphosInputProps } from "@morphos/inputs";import { cn } from "@/lib/utils";export type InputProps = MorphosInputProps;@Component()export class Input extends StatelessComponent<InputProps> { render() { const { class: cls, ...rest } = this.props; return ( <MorphosInput class={cn( "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focused:border-ring data-focused:ring-[3px] data-focused:ring-ring/50 data-invalid:border-destructive data-invalid:ring-destructive/20 md:text-sm", cls, )} {...rest} /> ); }}Install the following dependencies:
npm install @morphos/inputs @praxisjs/csspnpm add @morphos/inputs @praxisjs/cssyarn add @morphos/inputs @praxisjs/cssbun add @morphos/inputs @praxisjs/cssCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { cx, Stylesheet, Styled, tokenVars } from "@praxisjs/css";import { Component } from "@praxisjs/decorators";import { Input as MorphosInput, type InputProps as MorphosInputProps } from "@morphos/inputs";import { KosmesisTokens } from "@/lib/kosmesis-theme";const t = tokenVars(KosmesisTokens);class InputStyles extends Stylesheet { $root = this.css({ display: "flex", height: "2.25rem", width: "100%", minWidth: "0", borderRadius: `calc(${t.radius} - 2px)`, border: `1px solid ${t.input}`, backgroundColor: "transparent", padding: "0.25rem 0.75rem", fontSize: "0.875rem", boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)", outline: "none", transition: "color 120ms ease, box-shadow 120ms ease", }) .on("&::file-selector-button", { display: "inline-flex", height: "1.75rem", border: "0", backgroundColor: "transparent", fontSize: "0.875rem", fontWeight: 500 }) .placeholder({ color: t.mutedForeground }) .disabled({ pointerEvents: "none", cursor: "not-allowed", opacity: 0.5 }) .on("&[data-disabled]", { pointerEvents: "none", cursor: "not-allowed", opacity: 0.5 }) .on("&[data-focused]", { borderColor: t.ring, boxShadow: `0 0 0 3px color-mix(in oklab, ${t.ring} 50%, transparent)` }) .on("&[data-invalid]", { borderColor: t.destructive, boxShadow: `0 0 0 3px color-mix(in oklab, ${t.destructive} 20%, transparent)` });}export type InputProps = MorphosInputProps;@Component()export class Input extends StatelessComponent<InputProps> { @Styled(InputStyles) $s!: InputStyles; render() { const { class: cls, ...rest } = this.props; return <MorphosInput class={cx(this.$s.$root, cls)} {...rest} />; }}Examples
Usage
import { Input } from "@/components/ui/input";
<Input type="email" placeholder="[email protected]" />
<Input disabled placeholder="Disabled" />
<Input invalid placeholder="Invalid" />Props
Passes through to Morphos's Input. See
Morphos's Input docs for details.
| Prop | Type | Default |
|---|---|---|
type | "text" | "email" | "password" | "number" | "search" | "tel" | "url" | — |
value | string | — |
defaultValue | string | — |
placeholder | string | — |
disabled | boolean | — |
readonly | boolean | — |
required | boolean | — |
invalid | boolean | — |
name | string | — |
autoComplete | string | — |
maxLength | number | — |
minLength | number | — |
onInput | (value: string, event: Event) => void | — |
onChange | (value: string, event: Event) => void | — |
onFocus | (event: FocusEvent) => void | — |
onBlur | (event: FocusEvent) => void | — |
aria-label | string | — |
aria-labelledby | string | — |
aria-describedby | string | — |