HTML Element Placeholders

examples/src/app.js

@@ -18,7 +18,7 @@ ReactDOM.render(
 		<Contributors label="Contributors (Async)" />
 		<NumericSelect label="Numeric Values" />
 		<CustomRender label="Custom Render Methods"/>
-		<CustomComponents label="Custom Option and Value Components" />
+		<CustomComponents label="Custom Placeholder, Option and Value Components" />
 		{/*
 		<SelectedValuesField label="Option Creation (tags mode)" options={FLAVOURS} allowCreate hint="Enter a value that's NOT in the list, then hit return" />
 		*/}

examples/src/components/CustomComponents.js

@@ -91,18 +91,23 @@ const UsersField = React.createClass({
 		this.setState({ value });
 	},
 	render () {
+		var placeholder = <span>&#9786; Select User</span>;
+
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
 				<Select
 					onChange={this.setValue}
 					optionComponent={GravatarOption}
 					options={USERS}
-					placeholder="Select user"
+					placeholder={placeholder}
 					value={this.state.value}
 					valueComponent={GravatarValue}
 					/>
-				<div className="hint">This example implements custom Option and Value components to render a Gravatar image for each user based on their email</div>
+				<div className="hint">
+					This example implements custom Option and Value components to render a Gravatar image for each user based on their email.
+					It also demonstrates rendering HTML elements as the placeholder.
+				</div>
 			</div>
 		);
 	}

src/Async.js

@@ -46,7 +46,10 @@ const Async = React.createClass({
 		loadingPlaceholder: React.PropTypes.string,     // replaces the placeholder while options are loading
 		minimumInput: React.PropTypes.number,           // the minimum number of characters that trigger loadOptions
 		noResultsText: React.PropTypes.string,          // placeholder displayed when there are no matching search results (shared with Select)
-		placeholder: React.PropTypes.string,            // field placeholder, displayed when there's no value (shared with Select)
+		placeholder: React.PropTypes.oneOfType([        // field placeholder, displayed when there's no value (shared with Select)
+			React.PropTypes.string,
+			React.PropTypes.node
+		]),
 		searchingText: React.PropTypes.string,          // message to display while options are loading
 		searchPromptText: React.PropTypes.string,       // label to prompt for search input
 	},