TextInput

TextInput is an abstraction over <input type=text>. It inherits most props from Input. We describe both in this section.

controlled:

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

uncontrolled:

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

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.
• shrink or enlarge the input with size.

others

• Add data-autofocus to focus on mount