Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react'
- import styled from 'styled-components'
- const Wrapper = styled.div`
- position: relative;
- width: 100%;
- padding-bottom: 2rem;
- input:focus ~ label,
- input:valid ~ label {
- font-size: 0.8rem;
- color: #1976d2;
- top: -0.5rem;
- }
- `
- const Error = styled.div`
- position: absolute;
- left: 0.7rem;
- right: auto;
- font-size: 95%;
- color: #ff9c9c;
- `
- const FieldLabel = styled.label`
- position: absolute;
- display: block;
- pointer-events: none;
- color: rgba(0, 0, 0, 0.54);
- top: 0.75rem;
- -webkit-transition: 0.2s ease-in;
- transition: 0.2s ease-in;
- z-index: 1;
- color: #999;
- `
- const InputField = styled.input`
- line-height: 2em;
- background: transparent;
- border: none;
- border-bottom: 1px solid rgba(0, 0, 0, 0.42);
- -webkit-transition: 0.2s ease-in;
- transition: 0.2s ease-in;
- width: 100%;
- :focus {
- outline: none;
- border-bottom: 1px solid #1976d2;
- }
- `
- const Input = ({ label, error, ...rest }) => (
- <Wrapper>
- <InputField required {...rest} />
- <FieldLabel>{label}</FieldLabel>
- {error && <Error>{error}</Error>}
- </Wrapper>
- )
- export default Input
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement