hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-14 05:58:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prepare 1.0.0-beta.6

Browse Source
This commit is contained in:
Ronan Berder
2026-06-23 18:14:19 +08:00
parent fbf3f47b75
commit a17eaa20d3
63 changed files with 2398 additions and 1502 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/input.mdx
+30 -10
View File
@@ -6,6 +6,30 @@
## Usage
<Steps>
<Step title="Include CSS">
Import Tailwind and one full Basecoat style bundle.
```css
@import "tailwindcss";
@import "basecoat-css/vega.css";
```
Or import only the base CSS, Input component CSS, and one style pack.
```css
@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/input.css";
@import "basecoat-css/styles/vega.css";
```
Using CDN or bundler imports? See the [Installation page](/installation).
</Step>
<Step title="Add your input HTML">
Add `class="input"` to supported `<input>` elements. Inputs inside a `class="field"` container also receive the same styling automatically for common text-like input types.
Use native HTML attributes for behavior: `disabled` for disabled inputs, `required` for required fields, and `aria-invalid="true"` for invalid state styling.
@@ -14,6 +38,9 @@ Use native HTML attributes for behavior: `disabled` for disabled inputs, `requir
<input class="input" type="email" placeholder="Email" />
```
</Step>
</Steps>
## Examples
### Basic
@@ -58,11 +85,7 @@ Use `field` with a label and description to create an accessible field.
### Invalid
<Preview class="w-full max-w-xs">
<div role="group" class="field">
<label for="input-invalid">Email</label>
<input class="input" id="input-invalid" type="email" placeholder="Email" aria-invalid="true" />
<p>Please enter a valid email address.</p>
</div>
<input class="input" type="email" placeholder="Email" aria-invalid="true" />
</Preview>
### File
@@ -118,8 +141,7 @@ Use the [Input Group](/components/input-group/) patterns to add icons, text, or
<Preview class="w-full max-w-xs">
<div class="relative">
<input class="input ps-9" type="search" placeholder="Search..." />
<div class="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4">
<svg class="lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg>
<div class="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4"><svg class="lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg>
</div>
</div>
</Preview>
@@ -131,9 +153,7 @@ Use [Button Group](/components/button-group/) when an input should be grouped wi
<Preview class="w-full max-w-xs">
<div role="group" aria-label="Search" class="button-group">
<input class="input" type="search" placeholder="Search..." />
<button type="submit" class="btn" data-variant="outline" data-size="icon" aria-label="Search">
<svg class="lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg>
</button>
<button type="submit" class="btn" data-variant="outline" data-size="icon" aria-label="Search"><svg class="lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg></button>
</div>
</Preview>