Input

A styled text input for collecting user data.

Import

import { Input } from '@oztix/roadie-components'

Examples

Default

<Input placeholder='Enter text' />

Sizes

<Input size='sm' placeholder='Small' />
<Input size='md' placeholder='Medium (default)' />
<Input size='lg' placeholder='Large' />

Emphasis

<Input emphasis='normal' placeholder='Normal emphasis' />
<Input emphasis='subtle' placeholder='Subtle emphasis' />

States

Inputs start neutral, gain an accent-coloured border and ring on focus, and switch to danger colouring when invalid.

{/* Default */}
<Input placeholder='Click to focus' />
{/* Invalid */}
<Input aria-invalid='true' defaultValue='bad-email' />
{/* Disabled */}
<Input disabled placeholder='Disabled' />

Accessibility

• Label association: Always pair with a <label> (or Field.Label) using matching htmlFor/id attributes.
• Validation: Set aria-invalid="true" on invalid inputs. is-interactive-field provides visual danger styling automatically.
• Description: Use aria-describedby to link helper or error text to the input.