👍 added required Tag to Field component when its required

kufu · Jun 21, 2019 · a6d1370 · a6d1370
1 parent 749c9f1
commit a6d1370
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components'
 import { InjectedProps, withTheme } from '../../hocs/withTheme'
 
 import { NumberInput, PasswordInput, Props as InputProps, TextInput } from '../Input'
+import { Tag } from '../Tag'
 
 interface Props {
   label: string
@@ -43,7 +44,14 @@ const fieldFactory: (
     <Wrapper width={widthStyle}>
       <label>
         <LabelHead theme={theme}>
-          <Title theme={theme}>{label}</Title>
+          <Title theme={theme}>
+            {label}
+            {required && (
+              <TagWrapper>
+                <Tag type="require">必須</Tag>
+              </TagWrapper>
+            )}
+          </Title>
           {help && <Help theme={theme}>{help}</Help>}
         </LabelHead>
         {InputComponent ? (
@@ -108,3 +116,7 @@ const Error = styled.p`
     line-height: 1.4;
   `}
 `
+
+const TagWrapper = styled.span`
+  margin-left: 8px;
+`