Mushilu-San UI Input
A single-line text field with sizes, visual variants and an invalid state.
Selector: input[muiInput]
import { Input } from '@mushilu-san/ui/forms';Loading example…
Overview
<input>, so it keeps the native role, value handling and autofill. Pair it with a <label> or a Form field.
invalid for the failed-validation styling. It also sets aria-invalid="true", so screen readers announce the state. Link an error message with aria-describedby.
Examples
Sizes and variants
Loading example…
Guidelines
Do
Always give an input a visible label. Placeholder text is not a label. Use the right type(email,tel,search) so mobile keyboards match.
Don't
Do not use placeholder text as the only instruction. Do not show an error without telling the user how to fix it.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
input[muiInput] | textbox (native) | invalid sets data-invalid and aria-invalid="true". |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab |
Name the field with a <label>oraria-label. Useautocompletefor personal data.
API
Input
| Name | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Input height and text size: `sm`, `md` or `lg`. Default `md`. |
variant | 'ghost' | 'outline' | 'filled' | 'outline' | Visual style: `outline`, `filled` or `ghost`. Default `outline`. |
invalid | boolean | false | Shows the failed-validation style and sets `data-invalid`. Also sets `aria-invalid`. Accepts attribute presence, e.g. <… invalid>. |
CSS parts
::part(input)
Tokens
--mui-color-surface--mui-color-border--mui-color-text--mui-color-focus-ring--mui-color-danger--mui-touch-target