diff --git a/core/components/molecules/form/field/field.tsx b/core/components/molecules/form/field/field.tsx index 38c5ae40a..349539b85 100644 --- a/core/components/molecules/form/field/field.tsx +++ b/core/components/molecules/form/field/field.tsx @@ -31,6 +31,8 @@ export interface IFieldProps { actions?: Array; /** checkbox alignment */ checkbox?: boolean; + /** Shows the user this field is required */ + required?: boolean; hasError?: boolean; htmlFor?: string; children?: React.ReactNode; @@ -123,6 +125,7 @@ const Field = (props: IFieldProps) => { + {props.required && } {props.fieldComponent ? ( @@ -177,6 +180,11 @@ Field.Element = styled.div` } `; +Field.RequiredIndicator = styled.span.attrs({ children: "*" })` + color: red; + margin-left: ${spacing.unit / 2}px; +`; + Field.FieldSetElement = styled.fieldset` &:not(:last-child):not(:only-child) { margin-bottom: ${spacing.medium};