diff --git a/src/components/input/input.ios.scss b/src/components/input/input.ios.scss
index a968e7f5aa9..e276da2f670 100644
--- a/src/components/input/input.ios.scss
+++ b/src/components/input/input.ios.scss
@@ -3,24 +3,49 @@
 // iOS Input
 // --------------------------------------------------
 
+/// @prop - Background color of the input
 $text-input-ios-background-color:          $list-ios-background-color !default;
 
+/// @prop - Margin top of the input
 $text-input-ios-margin-top:                $item-ios-padding-top !default;
+
+/// @prop - Margin right of the input
 $text-input-ios-margin-right:              ($item-ios-padding-right / 2) !default;
+
+/// @prop - Margin bottom of the input
 $text-input-ios-margin-bottom:             $item-ios-padding-bottom !default;
+
+/// @prop - Margin left of the input
 $text-input-ios-margin-left:               0 !default;
 
+/// @prop - Width of the icon used to clear the input
 $text-input-ios-input-clear-icon-width:    30px !default;
+
+/// @prop - Color of the icon used to clear the input
 $text-input-ios-input-clear-icon-color:    rgba(0, 0, 0, .5) !default;
+
+/// @prop - Icon used to clear the input
 $text-input-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $text-input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
+
+/// @prop - Size of the icon used to clear the input
 $text-input-ios-input-clear-icon-size:     18px !default;
 
+/// @prop - Show the focus highlight when the input has focus
 $text-input-ios-show-focus-highlight:      false !default;
+
+/// @prop - Show the valid highlight when it is valid and has a value
 $text-input-ios-show-valid-highlight:      $text-input-ios-show-focus-highlight !default;
+
+/// @prop - Show the invalid highlight when it is invalid and has value
 $text-input-ios-show-invalid-highlight:    $text-input-ios-show-focus-highlight !default;
 
+/// @prop - Color of the input highlight
 $text-input-ios-highlight-color:           color($colors-ios, primary) !default;
+
+/// @prop - Color of the input highlight when valid
 $text-input-ios-highlight-color-valid:     color($colors-ios, secondary) !default;
+
+/// @prop - Color of the input highlight when invalid
 $text-input-ios-highlight-color-invalid:   color($colors-ios, danger) !default;
 
 
diff --git a/src/components/input/input.md.scss b/src/components/input/input.md.scss
index 10f12a1a50e..ca6827f9803 100644
--- a/src/components/input/input.md.scss
+++ b/src/components/input/input.md.scss
@@ -3,24 +3,49 @@
 // Material Design Input
 // --------------------------------------------------
 
+/// @prop - Background color of the input
 $text-input-md-background-color:            $list-md-background-color !default;
 
+/// @prop - Margin top of the input
 $text-input-md-margin-top:                  $item-md-padding-top !default;
+
+/// @prop - Margin right of the input
 $text-input-md-margin-right:                ($item-md-padding-right / 2) !default;
+
+/// @prop - Margin bottom of the input
 $text-input-md-margin-bottom:               $item-md-padding-bottom !default;
+
+/// @prop - Margin left of the input
 $text-input-md-margin-left:                 ($item-md-padding-left / 2) !default;
 
+/// @prop - Width of the icon used to clear the input
 $text-input-md-input-clear-icon-width:      30px !default;
+
+/// @prop - Color of the icon used to clear the input
 $text-input-md-input-clear-icon-color:      #5b5b5b !default;
+
+/// @prop - Icon used to clear the input
 $text-input-md-input-clear-icon-svg:        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
+
+/// @prop - Size of the icon used to clear the input
 $text-input-md-input-clear-icon-size:       22px !default;
 
+/// @prop - Show the focus highlight when the input has focus
 $text-input-md-show-focus-highlight:        true !default;
+
+/// @prop - Show the valid highlight when it is valid and has a value
 $text-input-md-show-valid-highlight:        $text-input-md-show-focus-highlight !default;
+
+/// @prop - Show the invalid highlight when it is invalid and has value
 $text-input-md-show-invalid-highlight:      $text-input-md-show-focus-highlight !default;
 
+/// @prop - Color of the input highlight
 $text-input-md-highlight-color:             color($colors-md, primary) !default;
+
+/// @prop - Color of the input highlight when valid
 $text-input-md-highlight-color-valid:       color($colors-md, secondary) !default;
+
+/// @prop - Color of the input highlight when invalid
 $text-input-md-highlight-color-invalid:     color($colors-md, danger) !default;
 
 
diff --git a/src/components/input/input.wp.scss b/src/components/input/input.wp.scss
index 442b954adfb..0852d59ca1c 100644
--- a/src/components/input/input.wp.scss
+++ b/src/components/input/input.wp.scss
@@ -3,29 +3,64 @@
 // Windows Input
 // --------------------------------------------------
 
+/// @prop - Background color of the input
 $text-input-wp-background-color:            $list-wp-background-color !default;
+
+/// @prop - Border color of the input
 $text-input-wp-border-color:                $input-wp-border-color !default;
+
+/// @prop - Border width of the input
 $text-input-wp-border-width:                2px !default;
 
+/// @prop - Margin top of the input
 $text-input-wp-margin-top:                  $item-wp-padding-top !default;
+
+/// @prop - Margin right of the input
 $text-input-wp-margin-right:                ($item-wp-padding-right / 2) !default;
+
+/// @prop - Margin bottom of the input
 $text-input-wp-margin-bottom:               $item-wp-padding-bottom !default;
+
+/// @prop - Margin left of the input
 $text-input-wp-margin-left:                 ($item-wp-padding-left / 2) !default;
+
+/// @prop - Vertical padding of the input
 $text-input-wp-padding-vertical:            0 !default;
+
+/// @prop - Horizontal padding of the input
 $text-input-wp-padding-horizontal:          8px !default;
+
+/// @prop - Line height of the input
 $text-input-wp-line-height:                 3rem !default;
 
+/// @prop - Width of the icon used to clear the input
 $text-input-wp-input-clear-icon-width:      30px !default;
+
+/// @prop - Color of the icon used to clear the input
 $text-input-wp-input-clear-icon-color:      $input-wp-border-color !default;
+
+/// @prop - Icon used to clear the input
 $text-input-wp-input-clear-icon-svg:        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-wp-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
+
+/// @prop - Size of the icon used to clear the input
 $text-input-wp-input-clear-icon-size:       22px !default;
 
+/// @prop - Show the focus highlight when the input has focus
 $text-input-wp-show-focus-highlight:        true !default;
+
+/// @prop - Show the valid highlight when it is valid and has a value
 $text-input-wp-show-valid-highlight:        $text-input-wp-show-focus-highlight !default;
+
+/// @prop - Show the invalid highlight when it is invalid and has value
 $text-input-wp-show-invalid-highlight:      $text-input-wp-show-focus-highlight !default;
 
+/// @prop - Color of the input highlight
 $text-input-wp-highlight-color:             color($colors-wp, primary) !default;
+
+/// @prop - Color of the input highlight when valid
 $text-input-wp-highlight-color-valid:       color($colors-wp, secondary) !default;
+
+/// @prop - Color of the input highlight when invalid
 $text-input-wp-highlight-color-invalid:     color($colors-wp, danger) !default;