react-floating-label-input

A floating label component for React. It inherits the font-size from the parent.

Try it yourself at the Storybook.

Example

import React from 'react';
import FloatingLabelInput from 'react-floating-label-input';

export default ({ onChange, value }) =>
  <div style={{ fontSize: 64 }}>
    <FloatingLabelInput
      id="example-3"
      label="label"
      onBlur={action('onBlur')}
      onChange={action('onChange')}
      onFocus={action('onFocus')}
      value={value}
    />
  </div>;

Props

name	optional	default
className	yes
fontSize	yes	inherit
id	no
label	no
onBlur	yes
onChange	no
onFocus	yes
placeholder	yes	''
refs	yes
type	yes	text
value	yes	''

• refs is set as ref prop on input

Dependencies

Peer dependencies:

• react
• styled-components

License

MIT