Input
Single-line inputs and Textarea, validated together by Field and Form.
import { Input, Textarea } from '@iffday/ui';Example
An input is a light grey rounded box without an outline, 38px tall, the same as the Select trigger. Textarea is the same Base UI Input rendered as a multi-line box, so Field and Form validate it too.
import { useT } from '@iffday/i18n';
import { Input, Textarea } from '@iffday/ui';
export default function Example() {
const t = useT();
return (
<div style={{ display: 'grid', gap: 12, width: 'min(100%, 360px)' }}>
<Input type="search" aria-label={t('common.search')} placeholder={t('common.search')} />
<Textarea
aria-label={t('review.card.replyToThisReview')}
placeholder={t('review.card.writeAReply')}
rows={3}
/>
<Input aria-label={t('common.name')} value="Busan" disabled readOnly />
</div>
);
}Usage
- An input on its own needs an
aria-label; inside aField, the field’s label names it. - The placeholder is a light grey hint that disappears on typing, so it never replaces a label.
- Web code never writes a native
<input>or<textarea>; the tests stop it.
Props
Other props go to InputHTMLAttributes<HTMLInputElement>.
- src/pages/cms-festivals.tsx25
- src/pages/cms.tsx14
- src/pages/film-images.tsx10
- src/pages/auth.tsx8
- src/pages/social.tsx7
- src/pages/personal.tsx6
- src/pages/account-settings.tsx5
- src/pages/planner-settings.tsx5
- src/pages/catalog-drafts.tsx3
- src/pages/cms-addresses.tsx3
- src/pages/archive-tools.tsx2
- src/pages/editorial.tsx2
- src/pages/festival-directory.tsx2
- src/pages/film-entry.tsx2
- src/pages/wallet-extras.tsx2
- src/App.tsx1
- src/film-header-debug.tsx1
- src/pages/profile.tsx1
- src/pages/programme.tsx1
- src/pages/schedule.tsx1
- src/pages/search.tsx1
- src/pages/sticker-board.tsx1
- src/review-card.tsx1
Textarea
packages/ui/src/controls.tsx:32Base UI's polymorphic Input also integrates textarea values with Field and Form.
Other props go to TextareaHTMLAttributes<HTMLTextAreaElement>.