Antd 6 form style similar to MUI
npm install ant-float-labelbash
npm install ant-float-label
or
yarn add ant-float-label
or
pnpm add ant-float-label
`
Ensure you have the peer dependencies installed:
`bash
npm install antd react react-dom
`
Usage
$3
You can use the components directly. Passing the placeholder prop will automatically act as the floating label content.
`tsx
import React, { useState } from 'react';
import { FloatInput, FloatSelect } from 'ant-float-label';
const App = () => {
const [value, setValue] = useState('');
return (
{/ The placeholder acts as the floating label /}
placeholder="Username"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
placeholder="Gender"
options={[
{ label: 'Male', value: 'male' },
{ label: 'Female', value: 'female' },
]}
/>
);
};
`
$3
The recommended way to use this library in forms is with FloatFormItem. It automatically handles the label state and passes it to the underlying component.
`tsx
import React from 'react';
import { Form, Button } from 'antd';
import { FloatFormItem, FloatInput, FloatPassword } from 'ant-float-label';
const LoginForm = () => {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('Success:', values);
};
return (
form={form}
name="login"
onFinish={onFinish}
style={{ maxWidth: 400 }}
>
name="username"
label="Username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
name="password"
label="Password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
);
};
`
Available Components
All components inherit props from their Ant Design counterparts.
| Component | Description |
|-----------|-------------|
| FloatInput | Wraps Input |
| FloatPassword | Wraps Input.Password |
| FloatInputNumber | Wraps InputNumber |
| FloatSelect | Wraps Select |
| FloatDatePicker | Wraps DatePicker |
| FloatRangePicker | Wraps DatePicker.RangePicker |
| FloatTimePicker | Wraps TimePicker |
| FloatCascader | Wraps Cascader |
| FloatTreeSelect | Wraps TreeSelect |
| FloatAutoComplete | Wraps AutoComplete |
| FloatFormItem | Specialized Form.Item for automatic label handling |
Props
$3
Most components accept all standard Ant Design props for their respective base component (e.g., FloatInput accepts all InputProps).
$3
- label (string | ReactNode): When used with FloatFormItem, the label prop of the FormItem is automatically used as the floating label.
- placeholder (string): When used standalone, the placeholder acts as the floating label text.
- labelBoxProps (object): Props passed to the internal wrapper for advanced styling (e.g. style, className for the box container).
Customization
You can customize the appearance by overriding CSS variables or providing labelBoxProps. The library follows Ant Design's design token system, so changing your global theme config will automatically update these components.
`tsx
placeholder="Custom Style"
labelBoxProps={{
style: { borderColor: 'red' }
}}
/>
``