Inputs
Floating-label text, email, password, phone, checkbox, and validation states.
Text and email
Floating-label inputs. A valid icon appears once the input has a value.
import { Input } from '@mediayard/agoratopia-ui/components/input';
<Input placeholder="First Name" type="text" />
<Input placeholder="Email Address" type="email" /> Password
Includes a visibility toggle button. Password fields should always live inside a form so password managers can handle them.
<Input placeholder="Password" type="password" /> Phone
Includes a calling-code selector that opens a searchable modal. Pass default_country (ISO alpha-2) to preselect a calling code; it defaults to Cyprus.
<Input placeholder="Phone Number" type="tel" />
<Input placeholder="Phone Number (UK default)" type="tel" default_country="GB" /> Checkbox
The placeholder is used as the label.
<Input placeholder="Sign up to our newsletter" type="checkbox" /> Validation errors
Pass aria-invalid and an errors array to show the invalid state.
Invalid email address
<Input
placeholder="Email Address"
type="email"
value="not-an-email"
aria-invalid="true"
errors={[{ message: 'Invalid email address' }]}
/> Disabled
<Input placeholder="Disabled" type="text" disabled />