Input

Input 是一个允许用户输入文本的组件。

Storybook Source Recipe Source

使用

Username

Disabled

Username

ReadOnly

Username

Variants

Variant

Sizes

Size

Colors

Color

Label Placements

可以设置 labelPlacement 属性为 inside、outside、float-outside 或 float-inside 来改变 label 的位置。

Float Inside

Inside

Float Outside

Outside

Clear Button

如果传递了 clearable 属性，将在输入的末尾有一个 clear 按钮，仅在有值时是可见的。

Prefix & Suffix

可以设置 prefix 和 suffix 属性来添加前缀和后缀。

$Amount

WeightKG

https://Website.com

Invalid

API

Input Props

Input Props 继承 as (默认为 input 标签) 的 Props。

Prop	Type	Default	Description
color	'blue'\|'orange'\|'yellow'\|'ryan'\|'red'\|'green'\|'pick'\|'purple'\|'gray'	'blue'	Input 的颜色。
size	'sm'\|'md'\|'lg'	'md'	Input 的大小。
radius	'sm'\|'md'\|'lg'\|'full'\|'none'	size	Input 的 BorderRadius。
variant	'filled'\|'outlined'\|'underlined'	'outlined'	Input 的外观样式。
placeholder	string	-	Input 的占位符。
type	'text'\|'email'\|'password'\|'number'\|'search'\|'tel'\|'url'\|'date'\|'datetime-local'\|'month'\|'week'\|'time'	'text'	Input 的类型。
value	string	-	Input 的值。
defaultValue	string	-	Input 的默认值。（非受控）
disabled	boolean	false	Input 是否禁用。
name	string	-	Input 的 name。
className	ClassValue	-	用于根元素的 className。
prefix	ReactNode	-	Input 的前缀。
suffix	ReactNode	-	Input 的后缀。
ref	Ref	-	用于转发 Input 内的 input
fullWidth	boolean	false	是否占满父元素的宽度。
label	ReactNode	-	Input 的 label。
labelPlacement	'inside'\|'outside'\|'float-outside'\|'float-inside'	'float-outside'	Input 的 label 的位置。
invaild	boolean	false	Input 是否无效。
clearable	boolean	false	是否显示清除按钮。
onChange	function	-	当 Input 的值发生变化时会触发该回调函数。
onValueChange	(value: string) => void	-	当 Input 的值发生变化时会触发该回调函数。
onClear	function	-	当 Cleat 按钮被点击时触发该回调函数。
as	ElementType	'input'	用于 Input 内 input 的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	SxProps<SwitchOwnerState>	-	用于根元素的 sx 属性。
classes	Partial<Record<Slots, ClassValue>>	-	Input Slots 的 className。
slotProps	Partial<Record<Slots, ComponentProps>>	-	Input Slots 的 props。

Input Slots

Slot Name	Class Name	Default Component	Description
root	.nui-input-root	'div'	Input 的根元素。
label	.nui-input-label	'label'	Input 的 label。
clearBtn	.nui-input-clear-btn	Button	Input 的清除按钮。
prefix	.nui-input-prefix	'span'	Input 的前缀。
suffix	.nui-input-suffix	'span'	Input 的后缀。