UI to indicate a "Partially-required" field in web form?

Question

I have a set of radio buttons where a selection is required. In addition, there is an optional text box that shows up next to one of the selections.

What would be the best way to make it clear what is required and what is optional?

<strong>User Availability:</strong><br>
<input value="Available" type="radio"> Available<br />
<input value="Unvailable" type="radio"> Unvailable
until <input type="text"> <small>MM/DD/YYYY</small>

Thanks in advance for any ideas. I'm also open to a completely different approach.

Clarification: The "optional" part is the date. You MUST select either Available or Unavailable. But the date is optional.

This is a UI question, not a technical one.

Answer 1

Assuming "mm/dd/yyy" is the textbox, I'd put the this text in the textbox, with it being cleared when the user clicks or otherwise sets focus on the textbox:

(date) (optional)

Answer 2

You can just add a message next to that field. For example (the message here may not be the best).

[ ] Avaliable

[ ] Unvailable (For "Unavailable") until ___________

You can also just make the text box appear only when "Unvailable" is selected.

[X] Available

[ ] Unavailable

[ ] Available

[X] Unavailable until [_________________________]

You can also make it explicit on the instructions that they must fill out a date when they choose "Unvailable".

Answer 3

Are you asking from UI perspective or technical perspective?

You could hide the required textbox, and only reveal if if the user selects the "Available" option.

you can do this in javascript, or perhaps in an updatepanel in your code behind.

Are you using .NET? In your page_init you could add an attribute to your availalle radio button.

Attribute.Add("onClick", "RevealTextbox();")

then your javascript would just:

function RevealTextBox() {

textbox.style.display = 'block'

}

Answer 4

Why bother displaying something that nobody cares about? If you, or your users cared about the date then it would be compulsory.