Skip to content

cymen/react-floating-label-input

Repository files navigation

react-floating-label-input

License Downloads minified size minzipped size

npm badge

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

react-floating-label-input

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