coss.com Svelte

Input

A native input element.

API Reference
Loading p-input-1 preview…

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/input.json

Usage

<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
</script>

<Input />

API Reference

Input

Styled wrapper for the Shards UI Input with custom size options.

PropTypeDefaultDescription
size"sm" \| "default" \| "lg" \| number"default"Controls the input height. Number values pass to the native size attribute
unstyledbooleanfalseRemoves the wrapper styling, including the border and shadow

Examples

For accessible labelling and validation, prefer using the Field component to wrap inputs, or the Field.Control component. See some related examples.

Small Size

Loading p-input-2 preview…

Large Size

Loading p-input-3 preview…

Disabled

Loading p-input-4 preview…

File

Loading p-input-5 preview…

With Label

Loading p-input-6 preview…

With Button

Loading p-input-7 preview…

Form Integration

Loading p-form-1 preview…