TextInput

TextInput is an abstraction over <input type=text>. It inherits most props from <Input>. We describe all props here.

controlled:

<TextInput
    value={summary}
    onChange={(event) => setSummary(event.currentTarget.value)}
    data-autofocus
    label="Summary"
    placeholder="What did you work on?"
/>

uncontrolled:

<TextInput
    type="email"
    ref={mailInput}
    required
    label="Email"
    placeholder="john-appple@example.com"
/>

props

• Set the main label with label. A label describes the input's purpose.
• Add an optional secondary label with description
• Add some placeholder text with placeholder.
• Add icons, visually inside the input, with leftSection and rightSection.
• Mark the input as required. Mantine automatically adds an asterisk, unless we remove it with withAsterisk.