From db47a0aeb0c8a3d3bb69c4b405a05d1caa16d6ae Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Wed, 6 Apr 2022 14:04:42 +0200
Subject: [PATCH] feat(system): add label to Input component

---
 .../src/system/text-input/text-input.tsx             | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/status-react/src/system/text-input/text-input.tsx b/packages/status-react/src/system/text-input/text-input.tsx
index 5cd3b25f..96199707 100644
--- a/packages/status-react/src/system/text-input/text-input.tsx
+++ b/packages/status-react/src/system/text-input/text-input.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react'
 
 import { Box } from '../box'
+import { Text } from '../text'
 import { Base } from './styles'
 
 import type { Ref } from 'react'
@@ -10,11 +11,13 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 interface Props {
   id?: string
   name?: string
+  label?: string
   type?: InputProps['type']
   value?: string
   defaultValue?: string
   onChange?: InputProps['onChange']
   onBlur?: InputProps['onBlur']
+  onClick?: InputProps['onClick']
   disabled?: boolean
   readOnly?: boolean
   required?: boolean
@@ -28,9 +31,16 @@ interface Props {
 }
 
 const TextInput = (props: Props, ref: Ref<HTMLInputElement>) => {
+  const { label, ...inputProps } = props
+
   return (
     <Box>
-      <Base ref={ref} {...props} />
+      {label && (
+        <Text size={13} weight={500} css={{ marginBottom: 6 }}>
+          {label}
+        </Text>
+      )}
+      <Base ref={ref} {...inputProps} />
     </Box>
   )
 }