Site settings
Change the appearance of the site to suit your preferences
Input
Input fields are used to let the users type in content.
A simple input field
<Input label="Name" />
A controlled input field
() => { const [name, setName] = React.useState(""); return ( <Input label="Name" value={name} onChange={e => setName(e.target.value)} /> ); }
An input field with icons
<Stack gap={1}> <Input label="Phone" startElement={<PhoneOutline24Icon />} /> <Input label="Train" endElement={<TrainOutline24Icon />} /> </Stack>
Different variants
<Stack gap={3}> <Input label="Base" /> <Input label="Floating" variant="floating" /> </Stack>
Input with error
<Input label="Email" type="email" startElement={<MobileOutline24Icon />} errorText="You email is not valid" invalid />
Input with helper text
<Input label="Email" type="email" startElement={<MobileOutline24Icon />} helperText="This is the helpertext" />