jobiqo-cl/lib/es/src/components/02-atoms/01-forms/11-form-item/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import styled from 'styled-components';

const FormItem = styled.div `
  display: flex;
  flex-direction: column;
  margin-bottom: ${props => props.theme.formItem.marginBottom};
  align-items: flex-start;
`;
const FormLabel = styled.label `
  margin-bottom: ${props => props.theme.formItem.label.marginBottom};
  text-transform: ${props => props.theme.formItem.label.textTransform};
  letter-spacing: ${props => props.theme.formItem.label.letterSpacing};
  font-size: ${props => props.theme.formItem.label.fontSize};

  ${props => (props.error ? `color: ${props.theme.colors.danger};` : ``)}

  ${props => props.required
    ? `
    &::after {
      content: '*';
      margin-left: 0.5rem;
      color: ${props.theme.colors.danger};
    }
  `
    : ``}
`;

export { FormItem, FormLabel };