When an input is in error state, the red text appears with the error notification and the inputfield changes it's outline to red. How can I also colour the label of the TextInput red?
Currently only assigned some classes to the TextInput:
export const theme = createTheme({
/* Put your mantine theme override here */
components: {
TextInput: TextInput.extend({
classNames: {
root: classes["text-input"],
label: classes["text-input__label"],
error: classes["text-input__error"],
input: classes["text-input__input"]
}
})
}
});
This is my mantine form:
const form = useForm({
initialValues: {
name: ''
},
validate: {
name: (value) => (value.length <= 0) ? (<><Icon type="info" />Name is too short.</>) : value.length > 25 ? 'Name is too long.' : null
}
});
And some of the applied scss
.text-input {
display: flex;
flex-direction: column;
.text-input__label {
order: -1;
}
.text-input__error {
order: -1;
display: flex;
flex-direction: row;
align-items: center;
}
}
Any help would be greatly appreciated:)