This is a floating label component for React. It inherits the font-size from the parent so you can easily set the desired input font-size in your own CSS. It also accepts a shrink property which can be 1-99 inclusive. That is the percentage the label should be of the input font size. That means if you have a font size of 20px on the input, the default 70% will result in a 14px label size (20 * 0.7 = 14).
Try it yourself at the Storybook.
Here is the 3rd example above in JSX (64px font size with 20% label shrinkage):
import React from 'react';
import FloatingLabelInput from 'react-floating-label-input';
import 'react-floating-label-input/dist/react-floating-label-input.css';
export default ({ onChange, value }) =>
<div style={{ fontSize: 64 }}>
<FloatingLabelInput
id="example-3"
label="label"
onChange={onChange}
shrink={20}
value={value}
/>
</div>;
name | optional | default |
---|---|---|
fontSize | yes | inherit |
id | no | |
label | no | |
onBlur | yes | |
onChange | no | |
onFocus | yes | |
placeholder | yes | '' |
shrink | yes | 70% |
type | yes | text |
value | yes | '' |
The component renders with a DOM class of react-floating-label-input
.
Peer dependencies:
- react
- react-dom
- classnames